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

appendChild() 将新的节点插入到指定的节点前

  <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("btn02", function () {
    //创建一个广州节点  
    // 语法 在指定的子节点前面插入新的子节点。
    // 父节点.insertBefore(新的子节点, 指定的子节点)

    // 创建一个新的节点
    var li = document.createElement("li");
    // 往新的节点创建一个属性节点
    var text = document.createTextNode("广州")
    //  将 广州节点添加到li 中
    li.appendChild(text);

    // 获取bj 子节点
    var bj = document.getElementById("bj");

    // 获取父节点
    var city = document.getElementById("city")

    // 在父节点中，将新的子节点插入到指定的节点中
    city.insertBefore(li, bj)

  })
</script>