示例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

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