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