首页 > Web开发 > 详细

JS插入新的节点

时间:2017-10-31 10:34:46      阅读:323      评论:0      收藏:0      [点我收藏+]

insertBefore()

语法:

insertBefore(newchild,refchild)

newchild 插入新的节点

refchild 在此节点前插入新节点

 

<ul id="myList">

  <li>Coffee</li>

  <li>Tea</li>

</ul>

 

function myFunction(){

    var newItem=document.createElement("LI")

    var textnode=document.createTextNode("Water")

    newItem.appendChild(textnode)

    var list=document.getElementById("myList")

    list.insertBefore(newItem,list.childNodes[0]);

}

 

appendChild()

语法:

appendChild(newchild)

newchild 所添加的节点

 

<ul id="myList">

<li>Coffee</li>

<li>Tea</li>

</ul>

 

function myFunction(){

      var node=document.createElement("LI");

      var textnode=document.createTextNode("Water");

      node.appendChild(textnode);

      document.getElementById("myList").appendChild(node);

}

 

 

js写基础insertAfter()方法

//DOM没有提供insertAfter()方法

function insertAfter(newElement, targetElement){

     var parent = targetElement.parentNode;

     if (parent.lastChild == targetElement) {

// 如果最后的节点是目标元素,则直接添加。因为默认是最后

          parent.appendChild(newElement);

   }else {

         parent.insertBefore(newElement, targetElement.nextSibling);

//如果不是,则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面

    }

}

 

JS插入新的节点

原文:http://www.cnblogs.com/ranyonsue/p/7759996.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!