插入节点方法appendChild和insertBefore
定义:appendChild()方法可向节点的子节点列表的末尾添加新的子节点
语法:appendChild(newchild)
参数:newchild/所添加的节点
定义:insertBefore()方法可在已有的子节点前插入一个新的子节点
语法:insertBefore(newchild,refchild)
参数:newchild/插入新的节点; refchild/在此节点前插入新节点
<div id="box"> <p id="p1">1</p> <p id="p2">2</p> <p>3</p> </div>
<script> window.onload = insert; function insert(){ var box = document.getElementById("box"); var newNode = document.createElement("div"); newNode.innerHTML = " This is a newcon "; box.appendChild(newNode); box.insertBefore(newNode,null); // 这两种方法均可实现,在#box的末尾添加一个子节点div var p1 = document.getElementById("p1"); var p2 = document.getElementById("p2"); box.insertBefore(newNode,p1);//新建的元素节点插到#p1之前 box.insertBefore(newNode,p1.nextSibling);//插到#p1后面的节点元素之前,即#p1节点之后 box.insertBefore(newNode,p2.previousSibling);//插到#p2同一树层级节点之前的节点,即#p2之前 }; </script>