الفرق بين المراجعتين لصفحة: «JavaScript/Document/createElement»

مراجعة 03:45، 25 مارس 2018

في مُستندات HTML، يُنشئُ التّابع Document.createElement()‎ عنصرَ HTML المُحدّد عبر المُعامل tagName الذي يُمثّل اسم الوسم، أو يُنشئ كائنا من النّوع HTMLUnknownElement إن لم يُتعرَّف على اسم الوسم tagName.

البنية العامة

var element = document.createElement(tagName[, options]);

المعاملات

`tagName`

سلسلةٌ نصيّةٌ تُحدّد نوع العنصر المرغوب إنشاؤه. قيمة nodeName الخاصّة بالعنصر المُنشأ تُحدَّد من قيمة tagName. لا تَستعمِل الأسماء الموصوفة (مثل "html:a") مع هذا التّابع. عندما يُستدعى التّابع على مُستند HTML، فستُحوَّل قيمة tagName إلى أحرف صغيرة (lower case) قبل إنشاء العنصر. وفي معظم المُتصفّحات، التّعبير createElement(null)‎ مُكافئٌ للتّعبير createElement("null"‎)‎.

`options`

مُعاملٌ اختياريّ من النّوع ElementCreationOptions يحتوي على خاصيّة واحدة تُسمّى is، وقيمتها هي اسمُ الوسمِ لعنصرٍ مُخصّصٍ مُعرّفٍ مُسبقًا عبر التّابع customElements.define‎()‎‎. انظر مثال مكوّنات الويب أدناه للمزيد من التّفاصيل.

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

الكائن الجديد من النّوع Element.

أمثلة

مثال بسيط

يُنشئ المثال التّالي عنصر <div> جديد ويُدخله قبل العنصر ذو المعرّف "div1".

في جزء HTML نضع:

<!DOCTYPE html>
<html>
<head>
  <title>التّعامل مع العناصر</title>
</head>
<body>
  <div id="div1">أُنشئ النّص أعلاه ديناميكيًّا</div>
</body>
</html>

في جزء JavaScript نضع:

document.body.onload = addElement;

function addElement () { 
  // أنشئ العنصر الجديد
  var newDiv = document.createElement("div"); 
  // ضَع محتوى داخل العنصر
  var newContent = document.createTextNode("مرحبًا"); 
  // أضف عقدة النّص إلى العنصر المُنشأ
  newDiv.appendChild(newContent);  

  // أضف العنصر الجديد ومحتوياته إلى 
  // DOM
  var currentDiv = document.getElementById("div1"); 
  document.body.insertBefore(newDiv, currentDiv); 
}

مثال مكونات الويب

المثال التّالي يوسّع العنصر HTMLUListElement الذي يُمثّل العنصرَ <ul>.

// أنشئ صنفًا للعنصر
class ExpandingList extends HTMLUListElement {
  constructor() {
    // استدعِ دائما هذه الدّالة في أول الدّالة البانيّة
    super();

    // تعريف الدّالة البانيّة مُتجاهلٌ لإيجاز المثال
    ...
  }
}

// عرّف العنصر الجديد
customElements.define('expanding-list', ExpandingList, { extends: "ul" });

لو أردنا إنشاء نسخةٍ (instance) من هذا العنصر برمجيًّا، لاستعملنا استدعاءً مُشابهًا لما يلي:

let expandingList = document.createElement('ul', { is : 'expanding-list' })

سيُعطى العنصر الجديد خاصيّة is قيمتها اسمُ وسم العنصرِ المُخصّص.

مُلاحظة: لإبقاء التوافقيّة العكسيّة مع النّسخ السّابقة من مواصفة Custom Elements، ستسمح لك بعض المتصفحات بتمرير سلسلةٍ نصيّة عوضًا عن كائنٍ هنا، والذي تكون فيه قيمةُ السّلسلةِ النّصيّة اسمَ وسمِ العنصرِ المُخصّص.

دعم المتصفحات

الميزة	Chrome	Internet Explorer	Edge	Firefox	Opera	Safari
الدعم الأساسي	نعم	نعم	نعم	نعم	نعم	نعم
المُعامل `options`	نعم	؟	؟	50	؟	؟

انظر أيضًا

Document.createElementNS()‎
Node.removeChild()‎
Node.replaceChild()‎
Node.appendChild()‎
Node.insertBefore()‎
Node.hasChildNodes()‎
Document.createElementNS()‎ لتحديد عنوان URI الخاصّ بمجال الأسماء صراحةً (explicitly) للعنصر.

مصادر ومواصفات

مواصفة DOM

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:<code>Document.createElement()‎</code>}}</noinclude>
-في مُستندات HTML، يُنشئُ التّابع <code>Document.createElement()‎</code> عنصرَ HTML المُحدّد عبر المُعامل <code>tagName</code> الذي يُمثّل اسم الوسم، أو يُنشئ كائنا من النّوع <code>[[JavaScript/ HTMLUnknownElement| HTMLUnknownElement]]</code> إن لم يُتعرَّف على اسم الوسم <code>tagName</code>.
+في مُستندات HTML، يُنشئُ التّابع <code>Document.createElement()‎</code> عنصرَ HTML المُحدّد عبر المُعامل <code>tagName</code> الذي يُمثّل اسم الوسم، أو يُنشئ كائنا من النّوع <code> HTMLUnknownElement</code> إن لم يُتعرَّف على اسم الوسم <code>tagName</code>.
-'''مُلاحظة:''' في مستندات XUL، يُنشَأ عنصر XUL المُحدَّد. وفي مُستندات أخرى، يُنشَأ عنصرٌ بقيمةٍ <code>null</code> لعنوان URI الخاصّ بمجال الأسماء.
 ==البنية العامة==
@@ سطر 11: / سطر 9: @@
 ===المعاملات===
-=== <code>tagName</code> ===
+==== <code>tagName</code> ====
-سلسلةٌ نصيّةٌ تُحدّد نوع العنصر المرغوب إنشاؤه. قيمة <code>[[JavaScript/Node/nodeName|nodeName]]</code> الخاصّة بالعنصر المُنشأ تُحدّد من قيمة <code>tagName</code>. لا تَستعمِل الأسماء الموصوفة (مثل <code>"html:a"</code>) مع هذا التّابع. عندما يُستدعى التّابع على مُستند HTML، فستُحوَّل قيمة <code>tagName</code> إلى أحرف صغيرة (lower case) قبل إنشاء العنصر. وفي معظم المُتصفّحات، التّعبير <code>createElement(null)‎</code> مُكافئٌ للتّعبير <code>createElement("null"‎)</code>‎.
+سلسلةٌ نصيّةٌ تُحدّد نوع العنصر المرغوب إنشاؤه. قيمة <code>[[JavaScript/Node/nodeName|nodeName]]</code> الخاصّة بالعنصر المُنشأ تُحدَّد من قيمة <code>tagName</code>. لا تَستعمِل الأسماء الموصوفة (مثل <code>"html:a"</code>) مع هذا التّابع. عندما يُستدعى التّابع على مُستند HTML، فستُحوَّل قيمة <code>tagName</code> إلى أحرف صغيرة (lower case) قبل إنشاء العنصر. وفي معظم المُتصفّحات، التّعبير <code>createElement(null)‎</code> مُكافئٌ للتّعبير <code>createElement("null"‎)</code>‎.
-=== <code>options</code> ===
+==== <code>options</code> ====
-مُعاملٌ اختياريّ من النّوع <code>ElementCreationOptions</code> يحتوي على خاصيّة واحدة تُسمّى <code>[[HTML/Global Attributes|is]]</code>، وقيمتها هي اسمُ الوسمِ لعنصرٍ مُخصّصٍ مُعرّفٍ مُسبقًا عبر التّابع <code>customElements.define‎()</code>‎‎. انظر [[JavaScript/Document/createElement#.D9.85.D8.AB.D8.A7.D9.84 .D9.85.D9.83.D9.88.D9.86.D8.A7.D8.AA .D8.A7.D9.84.D9.88.D9.8A.D8.A8|مثال مكوّنات الويب]] أسفله للمزيد من التّفاصيل.
+مُعاملٌ اختياريّ من النّوع <code>ElementCreationOptions</code> يحتوي على خاصيّة واحدة تُسمّى <code>[[HTML/Global Attributes|is]]</code>، وقيمتها هي اسمُ الوسمِ لعنصرٍ مُخصّصٍ مُعرّفٍ مُسبقًا عبر التّابع <code>customElements.define‎()</code>‎‎. انظر [[JavaScript/Document/createElement#.D9.85.D8.AB.D8.A7.D9.84 .D9.85.D9.83.D9.88.D9.86.D8.A7.D8.AA .D8.A7.D9.84.D9.88.D9.8A.D8.A8|مثال مكوّنات الويب]] أدناه للمزيد من التّفاصيل.
 ===القيمة المعادة===
 الكائن الجديد من النّوع <code>[[JavaScript/Element|Element]]</code>.
@@ سطر 54: / سطر 52: @@
 ===مثال مكونات الويب===
-المثال التّالي يوسّع العنصر <code>[[JavaScript/HTMLUListElement|HTMLUListElement]]</code> الذي يُمثّل العنصرَ <code><nowiki><ul></nowiki></code>. <ul><syntaxhighlight lang="javascript">
+المثال التّالي يوسّع العنصر <code>[[JavaScript/HTMLUListElement|HTMLUListElement]]</code> الذي يُمثّل العنصرَ <code>[[HTML/ul|<nowiki><ul></nowiki>]]</code>. <ul><syntaxhighlight lang="javascript">
 // أنشئ صنفًا للعنصر
 class ExpandingList extends HTMLUListElement {