نحن نعلم أن كل من appendChild وinsertBefore لهما وظيفة إدراج العقد. ولكن في التطبيق، لا تزال هناك بعض الاختلافات بين الاثنين.
على سبيل المثال، عندما نريد إدراج عقدة فرعية P في القسم التالي:
<div id="test"><p id="x1">العقدة</p><p>العقدة</p></div>
يمكننا أن نكتب هكذا (يرجى إضافة تعليق آخر عند اختبار حالة معينة):
انسخ رمز الكود كما يلي:
<نوع البرنامج النصي = "نص/جافا سكريبت">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "هذا اختبار"؛
// يبدأ الاختبار هنا
// طريقة إلحاق الطفل:
oTest.appendChild(newNode);
// طريقة الإدراج قبل:
oTest.insertBefore(newNode,null);
</script>
من خلال الكود أعلاه، يمكنك اختبار أنه تم إنشاء عقدة جديدة ضمن العقدة div، وهذه العقدة هي العقدة الأخيرة في div. (لعرض DOM، يمكن لـ IE مشاهدته من خلال المكون الإضافي IE Developer Toolbar، ويمكن لـ Firefox استخدام Firebug)
من الواضح، من خلال هذا المثال، يمكننا أن نعرف أن كلا من appendChildhild وinsertBefore يمكنهما إدراج العقد.
في المثال أعلاه، يوجد مثل هذا الكود: oTest.insertBefore(newNode,null). هنا يحتوي InsertBefore على معلمتين يمكن تعيينهما، الأول هو نفس المعلمة appendChild، لكن المعلمة الثانية فريدة من نوعها. لا يمكن أن يكون فارغًا فحسب، بل يمكن أن يكون أيضًا:
انسخ رمز الكود كما يلي:
<نوع البرنامج النصي = "نص/جافا سكريبت">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "هذا اختبار"؛
oTest.insertBefore(newNode,refChild);
</script>
سيقوم هذا المثال بإدراج عقدة جديدة أمام العقدة x1
أو:
انسخ رمز الكود كما يلي:
<نوع البرنامج النصي = "نص/جافا سكريبت">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "هذا اختبار"؛
oTest.insertBefore(newNode,refChild.nextSibling);
</script>
سيقوم هذا المثال بإدراج عقدة جديدة قبل العقدة التالية للعقدة x1
متاح أيضًا لـ:
انسخ رمز الكود كما يلي:
<نوع البرنامج النصي = "نص/جافا سكريبت">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "هذا اختبار"؛
oTest.insertBefore(newNode,oTest.childNodes[0]);
</script>
سيقوم هذا المثال بإدراج عقدة جديدة أمام العقدة الفرعية الأولى. يمكنك أيضًا إدراج عقد جديدة في مواقع أخرى عن طريق تغيير العقد الفرعية[0,1,...]
نظرًا لأنه يمكن ملاحظة أن طريقة الإدراج بيفور () هي إدراج عقدة جديدة أمام العقدة الفرعية الموجودة، ولكن في المثال 1، يمكن أيضًا استخدام طريقة الإدراج بيفور () لإدراج عقدة جديدة في نهاية العقدة الفرعية قائمة العقدة. من خلال الجمع بين الحالتين، وجد أن طريقة الإدراج بيفور () يمكنها إدراج عقدة في أي موضع في قائمة العقد الفرعية.
من هذه الأمثلة:
تضيف طريقة appendChild () عقدة فرعية جديدة إلى نهاية قائمة العقد التابعة للعقدة.
يقوم الأسلوب InsertBefore() بإدراج عقدة جديدة في أي موضع في قائمة العقدة الفرعية.