طريقة insertBefore() في DOM HTML

مفهوم Element في HTML DOM

insertBefore()يستخدم هذا الطريقة لضبط العنصر الفرعي الجديد قبل العنصر الفرعي الحالي المحدد.

إذا كان العنصر الفرعي المقدم هو إشارة إلى عقدة موجودة بالفعل في الوثيقة، فإن insertBefore() تتحركها من موقعها الحالي إلى الموقع الجديد (يرجى الرجوع إلى الأمثلة الإضافية أدناه).

الاستخدامappendchild()الطريقة تضيف نود إلى نهاية قائمة فرع الأب

النص النهائي:

node.insertBefore(newNode, existingNode)

var newElem = document.createElement("h3");　// إنشاء عنصر h3 جديد
var newContent = document.createTextNode("Hi there");　// إنشاء نص جديد
newElem.appendChild(newContent);　// إضافة نود نصي إلى العنصر h3 المحدث
var body = document.body;　// الحصول على body
body.insertBefore(newElem, body.childNodes[0]); // في أول عنصر فرع body يضيف العنصر H3

ملاحظة:إذا كنت بحاجة إلى إنشاء عنصر يحتوي على نص، تذكر أن تنشئ النص كنود نصي، ثم أضفه إلى العنصر، ثم أضف العنصر إلى المستند.

تطابق المتصفحات

يدعم جميع المتصفحات طريقة insertBefore() بالكامل:

قيمة المتغير

تفاصيل تقنية

مزيد من الأمثلة

إنشاء علامة <p> وإدراجها داخل علامة <div>:

var para = document.createElement("p");　　　// إنشاء علامة <p>
var txt = document.createTextNode("هذا هو فقرة.");// إنشاء نود نصي
para.appendChild(txt);// إضافة النص إلى <p>
var div = document.getElementById("demo");// الحصول على div الذي يحتوي على id=demo
div.insertBefore(para, div.childNodes[0]);// في أول عنصر فرع div يضيف العنصر P

هذا المثال يتحرك عنصرًا من موقعه الحالي إلى موقعه الجديد:

var elem = document.getElementById("myList2").lastElementChild;
var list1 = document.getElementById("myList1");
list1.insertBefore(elem, list1.childNodes[0]);

مراجع ذات صلة

مرجع HTML DOMالنودطريقة .hasChildNodes()

مرجع HTML DOMالنودطريقة .appendChild()

مرجع HTML DOMالنودطريقة .removeChild()

مرجع HTML DOMالنودطريقة .replaceChild()

مرجع HTML DOMطريقة document.createElement()

مرجع HTML DOMطريقة document.createTextNode()

مرجع HTML DOMطريقة document.adoptNode()

مرجع HTML DOMطريقة document.importNode()

مفهوم Element في HTML DOM