插入节点方法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>