English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

طريقة HTML DOM appendChild()

مجموعة بيانات Element لـ HTML DOM

appendChild()يهدف هذا الطريقة إلى: إضافة عقدة إلى نهاية قائمة الأطفال للعقدة الأم المحددة.

إذا كان العقدة المحددة للطفل هي مرجع لعقدة موجودة في المستند، يقوم appendChild() بنقلها من موقعها الحالي إلى الموقع الجديد (انظر الأمثلة أدناه).

الاستخدامinsertBefore()يمكن استخدام الطريقة في إدراج عقدة جديدة قبل عقدة مسبقة في قائمة الأطفال للعقدة الأم المحددة.

النحو:

node.appendChild(node)
var newElem = document.createElement("h3"); // إنشاء عنصر h3 جديد
var newContent = document.createTextNode("嗨,你好!"); // إنشاء بعض النصوص 
newElem.appendChild(newContent); // إضافة عقدة نصية جديدة إلى h3 
document.body.appendChild(newElem); // إضافة العنصر الجديد ومحتواه إلى DOM
اختبار لرؤية‹/›

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

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

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

الطريقة
appendChild()هوهوهوهوهو

قيمة الم 参数

الم 参数الوصف
النودالعقدة التي سيتم إدراجها في العقدة الأم المحددة (عادةً العقدة)

تفاصيل تقنية

القيمة المعدة:القيمة المعدة هي العقدة المضاف إليها
إصدار DOM:مستوى DOM 1

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

إنشاء عقدة <p> وإدراجها في عقدة <div>:

var para = document.createElement("p"); // إنشاء عقدة <p>
var txt = document.createTextNode("This is a paragraph."); // إنشاء عقدة نصية
para.appendChild(txt); // إضافة النص إلى <p>
document.getElementById("demo").appendChild(para); // إدراج <p> في <div>
اختبار لرؤية‹/›

إنشاء عقدة <p> وإدراجها في نهاية جسم المستند:

var para = document.createElement("p"); // إنشاء عقدة <p>
var txt = document.createTextNode("This is a paragraph."); // إنشاء عقدة نصية
para.appendChild(txt); // إضافة النص إلى <p>
document.body.appendChild(para);// قم بتعديل <p> إلى الجسم
اختبار لرؤية‹/›

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

var elem = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(elem);
اختبار لرؤية‹/›

مراجع ذات صلة

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

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

مرجع 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