طريقة insertBefore() لـ عنصر DOM HTML

التعريف والاستخدام

insertBefore() ي插入 عقدة قبل عقدة فرعية موجودة.

انظر أيضًا:

طريقة appendChild()

طريقة replaceChild()

طريقة removeChild()

طريقة remove()

سمة childNodes

سمة firstChild

سمة lastChild

سمة firstElementChild

سمة lastElementChild

مثال

مثال 1

  1. إنشاء علامة <li>
  2. إنشاء نقطة نصية
  3. إضافة النص إلى علامة <li>
  4. إدراج علامة <li> قبل أول عنصر فرعي لـ <ul> :
const newNode = document.createElement("ul");
const textNode = document.createTextNode("ماء");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

جرب بنفسك

مثال 2

تحريك العنصر الأخير من قائمة إلى قائمة أخرى في بداية القائمة:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, list.children[0]);

جرب بنفسك

مثال 3

تحريك العنصر الأخير من قائمة إلى قائمة أخرى في نهاية القائمة:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, null);

جرب بنفسك

النص

element.insertBefore(newnode, existingnode)

أو

node.insertBefore(newnode, existingnode)

المعلمات

المعلمات الوصف
newnode مطلوب. النقطة التي سيتم إدراجها (عنصر).
existingnode

اختياري. ي插入新的 نقطة كطفل قبل النقطة المحددة.

إذا لم يتم تحديد أي شيء، فإن طريقة insertBefore تضيف newnode في نهاية النقطة.

القيمة المعدلة

النوع الوصف
النقطة النقطة التي يتم إدراجها.

دعم المتصفح

element.insertBefore() هي خاصية DOM Level 1 (1998).

يدعم جميع المتصفحات بشكل كامل:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
الدعم 9-11 الدعم الدعم الدعم الدعم