原生js添加節點appendChild、insertBefore

<p id="box" class="classa">
 <p id="p1">這是一個段落</p></p><script>
 var box=document.getElementById("box"); var p2=document.createElement("p"); //創建元素節點
 var txt=document.createTextNode("這是另一個段落"); //創建文本節點
 p2.appendChild(txt); //把創建的文本節點追加到元素節點中
 var attr=document.createAttribute("id"); //創建屬性節點
 attr.value="p2"; //給屬性節點設置值
 p2.setAttributeNode(attr); //給元素設置屬性節點
 box.appendChild(p2); //把創建的p元素追加到box最后
 console.log(box);</script>

<p id="box" class="classa">
 <p id="p1">這是一個段落</p>
 <p id="p2">這是另一個段落</p></p>

<p id="box">
 <p id="p1">這是一個段落</p></p><script>
 var box=document.getElementById("box"); var p1=document.getElementById("p1"); var p0=document.createElement("p"); var txt=document.createTextNode("這是一個段落");
 p0.appendChild(txt);
 box.insertBefore(p0,p1);
 console.log(box);</script>

<p id="box">
 <p>這是一個新段落</p>
 <p id="p1">這是一個段落</p></p>