مثال
إلحاق عنصر في القائمة:
var node = document.createElement("LI"); // Create a <li>
node
var textnode = document.createTextNode("Water"); // Create a text node
node.appendChild(textnode); // Append the text to <li>
document.getElementById("myList").appendChild(node); // Append <li> to
<ul> with id="myList"
قبل إلحاق:
- Coffee
- Tea
بعد إلحاق:
- Coffee
- Tea
- Water
انها محاولة لنفسك » أكثر "Try it Yourself" الأمثلة أدناه.
تعريف والاستخدام
و appendChild() طريقة بإلحاق عقدة كما الطفل الأخير من عقدة.
نصيحة: إذا كنت تريد إنشاء فقرة جديدة، مع النص، تذكر لإنشاء النص كما عقدة النص الذي إلحاق الفقرة، ثم إلحاق الفقرة للوثيقة.
يمكنك أيضا استخدام هذا الأسلوب لنقل عنصر من عنصر إلى آخر (See "More Examples") .
نصيحة: استخدم insertBefore() طريقة لادخال عقدة تابعة جديدة أمام، القائمة، العقدة المحددة الطفل.
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم بشكل كامل الأسلوب.
طريقة | |||||
---|---|---|---|---|---|
appendChild() | نعم فعلا | نعم فعلا | نعم فعلا | نعم فعلا | نعم فعلا |
بناء الجملة
node .appendChild( node )
قيم معلمة
معامل | اكتب | وصف |
---|---|---|
node | Node object | مطلوب. الكائن عقدة تريد إلحاق |
تفاصيل تقنية
قيمة الإرجاع: | كائن عقدة، وهو ما يمثل العقدة إلحاق |
---|---|
صفحة DOM | المستوى الأساسي كائن 1 عقدة |
مزيد من الأمثلة
مثال
نقل عنصر القائمة من قائمة إلى أخرى:
var node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
قبل إلحاق:
- Coffee
- Tea
- Water
- Milk
بعد إلحاق:
- Coffee
- Tea
- Milk
- Water
انها محاولة لنفسك » مثال
إنشاء <p> عنصر وإلحاقها إلى <div> العنصر:
var para = document.createElement("P"); // Create a
<p> node
var t =
document.createTextNode("This is a paragraph.");
// Create a text node
para.appendChild(t);
// Append the text to <p>
document.getElementById("myDIV").appendChild(para);
// Append <p> to <div> with id="myDIV"
انها محاولة لنفسك » مثال
إنشاء <p> عنصر مع بعض النصوص وإلحاقها إلى نهاية نص المستند:
var x = document.createElement("P"); // Create a <p>
node
var t = document.createTextNode("This is a
paragraph."); // Create a text node
x.appendChild(t);
// Append the text to <p>
document.body.appendChild(x);
// Append <p> to <body>
انها محاولة لنفسك » صفحات ذات صلة
HTML DOM إشارة: href="met_node_haschildnodes.html"> element . hasChildNodes() Method href="met_node_haschildnodes.html"> element . hasChildNodes() Method
HTML DOM إشارة: href="met_node_insertbefore.html"> element . insertBefore() Method href="met_node_insertbefore.html"> element . insertBefore() Method
HTML DOM إشارة: href="met_node_removechild.html"> element . removeChild() Method href="met_node_removechild.html"> element . removeChild() Method
HTML DOM إشارة: href="met_node_replacechild.html"> element . replaceChild() Method href="met_node_replacechild.html"> element . replaceChild() Method
HTML DOM إشارة: href="met_document_createelement.html">document. createElement() Method href="met_document_createelement.html">document. createElement() Method
HTML DOM إشارة: href="met_document_createtextnode.html">document. createTextNode() Method href="met_document_createtextnode.html">document. createTextNode() Method
HTML DOM إشارة: href="met_document_adoptnode.html">document. adoptNode() Method href="met_document_adoptnode.html">document. adoptNode() Method
HTML DOM إشارة: href="met_document_importnode.html">document. importNode() Method href="met_document_importnode.html">document. importNode() Method