js 删除removeChild与替换replaceChild

<input type="button" value="删除" id="btn" />
  <input type="button" value="替换" id="btn1" />
  <input type="button" value="全删" id="btn2" />
  <ul id="ul">
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
  </ul>

删除节点removeChild()

　　removeChild() 方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

　　　　语法:

　　　　　　nodeObject.removeChild(node)

　　　　参数:

　　　　　　node ：必需，指定需要删除的节点。

 

//移除父级元素中第一个子级元素
    my$("btn").onclick = function () {
      //参数为 要删除的元素
      my$("ul").removeChild(my$("ul").firstElementChild);
    };

    //删除成功就返回被删除的值 不成功返回NULL
    my$("btn").onclick = function () {
      console.log(my$("ul").removeChild(my$("ul").firstElementChild))
    };//返回值 <li>第一个</li>

    //用循环的方式去删除元素
    my$("btn2").onclick = function () {
      //点击按钮删除div中所有的子级元素
      //判断父级元素中有没有第一个子元素
      while (my$("ul").firstElementChild) {
        my$("ul").removeChild(my$("ul").firstElementChild);
      }
    };

 

 

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。 

　　语法：

　　　　node.replaceChild (newnode,oldnode )

　　参数：

　　　　newnode : 必需，用于替换 oldnode 的对象。 

　　　　oldnode : 必需，被 newnode 替换的对象。

 

my$("btn").onclick = function(){
      //创建一个元素标签
      var li = document.createElement('li');
      //给元素设置内容
      li.innerText=('新增一个内容');
      // setInnnerText(li,'增加的');
      my$('ul').insertBefore(li,my$('ul').lastElementChild);
      //第一个参数 添加的内容 第二个参数是在那个位置前面 添加
    }