JS插入新的节点

Posted 2020-10-12 ranyonsue

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

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

    }

}