سنناقش في هذه المقالة كيفية إنشاء عنصر HTML عبر JavaScript. سنرى هنا بعض الأمثلة لإدراج العنصر الذي تم إنشاؤه في المستند.
إن إنشاء العناصر بواسطة HTML ليس الطريقة الوحيدة لإنشاء العناصر. ومع ذلك، من أجل التبسيط، نقوم في كثير من الأحيان بإنشاء عناصر مباشرة في مستند HTML ولكن باستخدام JavaScript، من الممكن أيضًا إنشاء عناصر.
ال document.createElement() يُستخدم لإنشاء عقدة عنصر HTML ديناميكيًا بالاسم المحدد عبر JavaScript. تأخذ هذه الطريقة اسم العنصر كمعلمة وتقوم بإنشاء عقدة العنصر تلك.
بعد إنشاء عنصر، يمكننا إما استخدام طريقة appendChild () أو طريقة InsertBefore () لإدراج العنصر الذي تم إنشاؤه في المستند.
يمكننا استخدام إزالة الطفل () طريقة لإزالة عقدة ويمكن أيضًا استخدام استبدال الطفل () طريقة استبدال العقدة.
بناء الجملة
document.createElement(nodename);
تقبل هذه الطريقة قيمة معلمة واحدة مذكورة على النحو التالي:
مجموعة شبيبة
اسم العقدة: إنها المعلمة الإلزامية. هذه المعلمة من نوع السلسلة. فهو يحدد اسم العنصر الذي يتعين علينا إنشاؤه. اسم العنصر المحدد في المعلمة سوف ينشئ العنصر؛ وإلا، إذا لم يتم التعرف على اسم العنصر المحدد، فسيتم إنشاء عنصر HTML غير معروف.
ال document.createElement() سيعود العنصر الذي تم إنشاؤه حديثًا.
الآن، دعونا نرى بعض الأمثلة على استخدام document.createElement() طريقة. وهنا، سوف نعرض مثالين. في المثال الأول سوف نستخدم إلحاق الطفل() طريقة لإدراج العنصر في المستند، وفي المثال الثاني سنستخدم إدراج قبل () طريقة لإدراج عنصر تم إنشاؤه بواسطة document.createElement() طريقة.
مثال 1
في هذا المثال نستخدم document.createElement() طريقة لإنشاء عنصر زر جديد. سنقوم بإدراج العنصر الذي تم إنشاؤه باستخدام إلحاق الطفل() طريقة. هنا، هناك أ هزار() الطريقة التي ستنشئ عنصر زر جديدًا باستخدام إنشاء العنصر () طريقة. قمنا بتعيين النص باستخدام InnerHTML التي سيتم عرضها في الجزء العلوي من الزر.
دعونا نرى المثال الوارد أدناه.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; document.body.appendChild(btn); } <h2> It is an example of using the document.createElement() method. </h2> <h4> Click the below button to insert a new button element in the document. </h4> Create Button اختبره الآن انتاج |
بعد تنفيذ الكود أعلاه سيكون الناتج -
بعد النقر على الزر المحدد، سيكون الإخراج -
مثال2
في هذا المثال نستخدم document.createElement() طريقة لإنشاء عنصر زر جديد. وهنا نستخدم إدراج قبل () طريقة لإدراج العنصر الذي تم إنشاؤه. يوجد عنصر div يحتوي على عنصر فرعي للفقرة. سيتم إدراج عنصر الزر الجديد قبل العنصر الفرعي للفقرة في عنصر div.
دعونا نرى المثال الوارد أدناه.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; var element = document.getElementById('d1'); var child = document.getElementById('p1'); element.insertBefore(btn, child); } <h2> It is an example of using the document.createElement() method. </h2> <h4 id="heading4"> Click the below button to insert a new button element in the document. </h4> <p id="p1"> This is a paragraph. </p> Create Button اختبره الآن انتاج |
بعد تنفيذ الكود أعلاه سيكون الناتج -
بعد الضغط على الزر أعلاه سيكون الناتج -
توضح لقطة الشاشة أعلاه أنه تم إدراج عنصر الزر الجديد قبل عنصر الفقرة. وذلك لأننا استخدمنا إدراجBeofre() طريقة لإدراج العنصر الجديد الذي تم إنشاؤه باستخدام document.createElement() طريقة.