示例 1 :
追加节点
通过appendChild追加节点。 追加节点一定是把新的节点插在最后面
1. 创建新节点
2. 获取父节点
3. 通过appendChild追加
<div id="parentDiv"> <div id="d1">第一个div</div> <div id="d2">第二个div</div> <div id="d3">第三个div</div> </div> <script> function appendDiv(){ var d4= document.createElement("div"); var text = document.createTextNode("第四个div"); d4.appendChild(text); var parentDiv = document.getElementById("parentDiv"); parentDiv.appendChild(d4); } </script> <button onclick="appendDiv()">追加第4个div</button>
示例 2 :
在前方插入节点
有时候，需要在指定位置插入节点，而不是只是追加在后面。
这个时候就需要用到insertBefore
1. 创建新节点
2. 获取父节点
3. 获取需要加入的子节点
4. 通过insertBefore插入
注: insertBefore的第一个参数是新元素，第二个参数是插入位置
<div id="parentDiv"> <div id="d1">第一个div</div> <div id="d2">第二个div</div> <div id="d3">第三个div</div> </div> <script> function insertDiv(){ var d25= document.createElement("div"); var text = document.createTextNode("第二点五个div"); d25.appendChild(text); var parentDiv = document.getElementById("parentDiv"); var d3 = document.getElementById("d3"); parentDiv.insertBefore(d25,d3); } </script> <button onclick="insertDiv()">在第二和第三之间，插入第二点五个div</button>