เรารู้ว่า appendChild และ insertBefore ทั้งสองมีหน้าที่ในการแทรกโหนด แต่ในการใช้งานยังคงมีความแตกต่างบางประการระหว่างทั้งสอง
ตัวอย่างเช่น เมื่อเราต้องการแทรกโหนดย่อย P ใน div ต่อไปนี้:
<div id="test"><p id="x1">โหนด</p><p>โหนด</p></div>
เราสามารถเขียนแบบนี้ได้ (โปรดเพิ่มความคิดเห็นอื่นเมื่อทดสอบสถานการณ์บางอย่าง):
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
var oTest = document.getElementById("ทดสอบ");
var newNode = document.createElement("p");
newNode.innerHTML = "นี่คือการทดสอบ";
//การทดสอบเริ่มต้นที่นี่
//ผนวกวิธีการเด็ก:
oTest.appendChild (โหนดใหม่);
//insertBefore วิธีการ:
oTest.insertBefore (โหนดใหม่, null);
</สคริปต์>
ด้วยโค้ดข้างต้น คุณสามารถทดสอบได้ว่ามีการสร้างโหนดใหม่ภายใต้โหนด div และโหนดนี้เป็นโหนดสุดท้ายของ div (หากต้องการดู DOM นั้น IE สามารถดูได้ผ่านปลั๊กอิน IE Developer Toolbar และ Firefox สามารถใช้ Firebug ได้)
เห็นได้ชัดว่าจากตัวอย่างนี้ เราสามารถรู้ได้ว่าทั้ง appendChildhild และ insertBefore สามารถแทรกโหนดได้
ในตัวอย่างข้างต้น มีโค้ดดังกล่าว: oTest.insertBefore(newNode,null) ที่นี่ insertBefore มีพารามิเตอร์สองตัวที่สามารถตั้งค่าได้ ตัวแรกเหมือนกับ appendChild แต่ตัวที่สองไม่ซ้ำกัน ไม่เพียงแต่สามารถเป็นโมฆะได้ แต่ยังสามารถเป็น:
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
var oTest = document.getElementById("ทดสอบ");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "นี่คือการทดสอบ";
oTest.insertBefore (โหนดใหม่, refChild);
</สคริปต์>
ตัวอย่างนี้จะแทรกโหนดใหม่ด้านหน้าโหนด x1
หรือ:
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
var oTest = document.getElementById("ทดสอบ");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "นี่คือการทดสอบ";
oTest.insertBefore (โหนดใหม่ refChild.nextSibling);
</สคริปต์>
ตัวอย่างนี้จะแทรกโหนดใหม่ก่อนโหนดถัดไปของโหนด x1
ยังมีให้สำหรับ:
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
var oTest = document.getElementById("ทดสอบ");
var newNode = document.createElement("p");
newNode.innerHTML = "นี่คือการทดสอบ";
oTest.insertBefore (โหนดใหม่, oTest.childNodes [0]);
</สคริปต์>
ตัวอย่างนี้จะแทรกโหนดใหม่ไว้ด้านหน้าโหนดย่อยแรก คุณยังสามารถแทรกโหนดใหม่ที่ตำแหน่งอื่นโดยการเปลี่ยนโหนดย่อย[0,1,...]
เนื่องจากจะเห็นได้ว่าเมธอด insertBefore() คือการแทรกโหนดใหม่ข้างหน้าโหนดลูกที่มีอยู่ แต่ในตัวอย่างที่ 1 เมธอด insertBefore() ยังสามารถใช้เพื่อแทรกโหนดใหม่ที่ส่วนท้ายของโหนดลูกได้ รายการโหนด เมื่อรวมทั้งสองสถานการณ์เข้าด้วยกัน จะพบว่าเมธอด insertBefore() สามารถแทรกโหนดที่ตำแหน่งใดก็ได้ในรายการโหนดย่อย
จากตัวอย่างเหล่านี้:
appendChild() วิธีการเพิ่มโหนดลูกใหม่ไปยังส่วนท้ายของรายการโหนดลูกของโหนด
insertBefore() วิธีการแทรกโหนดใหม่ที่ตำแหน่งใด ๆ ในรายการโหนดลูกของโหนด