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);

      //第一个参数 添加的内容 第二个参数是在那个位置前面 添加

    }

巴特西

js 删除removeChild与替换replaceChild

最新文章

热门文章