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

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

}

}