JS插入新的節點

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

//如果不是，則插入在目標元素的下一個兄弟節點 的前面。也就是目標元素的后面

    }

}