javascript学习笔记--增删改查（三）

replaceChild新节点替换旧节点

  <div>
你喜欢那个城市
<ul id="city">
  <li id="bj">北京</li>
  <li>上海</li>
  <li>东京</li>
  <li>首尔</li>
</ul>
  </div>
  <div class="right chosen">
  <div><button id="btn01">创建一个广州节点，添加到City下</button></div>
<div><button id="btn02">将广州节点插入到#bj前</button></div>
<div><button id="btn03">使用广州节点替换#bj节点</button></div>
<div><button id="btn04">删除#bj节点</button></div>
<div><button id="btn05">读取City的html代码</button></div>
<div><button id="btn06">设置#bj的HTML代码</button></div>
</div>



<script>
 function myClick(idStr, fun) {
  var btn = document.getElementById(idStr)
  btn.onclick = fun;
  }
 myClick("btn03", function () {
    var bj = document.getElementById("bj");

    var li = document.createElement("li");
    var gz = document.createTextNode("广州");
    li.appendChild(gz);

    var city = document.getElementById("city")
    // 语法  父节点replaceChild （新节点，旧节点）
    city.replaceChild(li, bj);

  })
</script>