JavaScript

JavaScript DOM Create Element
انشاء عناصر جديدة داخل صفحة HTML بلغة جافا سكريبت

ستتعلم في هذا الدرس كيفة انشاء عناصر جديدة داخل صفحة HTML بلغة جافا سكريبت عن طريق الشجرة DOM Tree ايضاً بعد عملية الأنشاء يجب أن تقوم بأضافة محتوي لهذا العنصر ثم الحاقة داخل عنصر أخر في صفحة HTML.

التاريخ

12 نوفمبر 2022

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

2545

المواضيع

24
الشروحات chevron_left JavaScript DOM Create Element chevron_left JavaScript

DOM Create Element JavaScript
انشاء عناصر جديدة داخل صفحة HTML بلغة جافا سكريبت

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> createElement() DOM Method in JavaScript
دالة ()createElement في الشجرة DOM Tree في لغة جافا سكريبت

تستخدم دالة ()createElement في لغة جافا سكريبت لأضافة عناصر جديدة في صفحة HTML عن طريق لغة جافا سكريبت ولكن يجب عليك تتبع هذة العملية بأضافة محتوي لهذا العنصر عن طريق دالة innerText أو innerHTML أو textContent ثم تتبع هذة العملية ايضاً بدالة ()appendChild لألحاق هذا العنصر بأب paraent متفرع من شجرة DOM الخطوات:

  • انشاء عنصر جديد عن طريق دالة ()createElement.
  • اضافة محتوي نصي أو محتوي HTML عن طريق هذة الدوال دالة innerText أو innerHTML أو textContent.
  • ألحاق العنصر الجديد داخل أب Parent في شجرة DOM عن طريق دالة ()appendChild.
createElement() method Syntax

كيف تكتب دالة [ createElement ] createElement() method Syntax؟

document.createElement('tagName');

createElement Parameters معطيات أو عوامل دالة ()createElement في لغة جافا سكريبت:

نقوم بتمرير الي دالة ()createElement عامل واحد وهو:

  •  Tag Name  وهو علامة العنصر الزي تريد أنشاءه فأذا كنت تحتاج لفقرة نصية حدد p و1ذا كنت بحاجه الي عنوان رئيسي فحدد h1.
Create element append

يمكنك اضافة عنصر جديد عن طريق دالة ()createElement ودالة appenChild تضيف العنصر في نهاية parent بعد جميع العناصر.

let apple = document.createElement('h1');
apple.innerText = "Welcome To CloseTag.com";
document.body.appendChild(apple);
Create element prepend

يمكنك اضافة عنصر جديد عن طريق دالة ()createElement ودالة ()prependت ضيف العنصر في parent قبل جميع العناصر.

let apple = document.createElement('h1');
apple.innerText = "Welcome To CloseTag.com";
document.body.prepend(apple);
ملاحظات
  • دالة append تقوم بألحاق العنصر بعد جميع عناصر الأب parent.
  • دالة prepend تقوم بألحاق العنصر قبل جميع عناصر الأب parent.

</> Create element by event in JavaScript
انشاء عنصر بعد الضغط علي زر الفأرة mouse في لغة جافا سكريبت

من الضروري أظهار أجزاء عند تفاعل المستخدم من صفحة الويب عندما يقوم بالنقر علي جزء معين أو احتكان معين وذلك عن طريق جافا سكريبت Events.

Add element after click

اضافة عنصر بعد النقر علي زر المفأرة mouse داخل صفحة HTML في لغة جافا سكريبت.

let button = document.getElementById('button');
button.addEventListener("click",()=>{
   let apple = document.createElement('h1');
   apple.innerText = "Welcome To CloseTag.com";
   document.body.prepend(apple);
});

</> Create element by innerHTML in JavaScript
انشاء عنصر عن طريق دالة innerHTML في لغة جافا سكريبت

يمكنك اضافة عنصر عن طريق دالة innerHTML وهي ان تلحق محتوي HTML الي أي عنصر تريدة داخل صفحة الويب.

Add element innerHTML Append

اضافة عنصر عن طريق دالة innerHTML داخل صفحة HTML في لغة جافا سكريبت.

let myBody = document.body;
myBody.innerHTML += "<h1>Welcome To CloseTag.com<h1>";
Add element innerHTML Prepend

اضافة عنصر عن طريق دالة innerHTML داخل صفحة HTML قبل جميع العناصر في لغة جافا سكريبت.

let myBody = document.body;
myBody.innerHTML = "<h1>Welcome To CloseTag.com<h1> " + myBody.innerHTML;
Add element after click using innerHTML

اضافة عنصر بعد النقر علي زر المفأرة mouse داخل صفحة HTML بأستخدام خاصية innerHTML في لغة جافا سكريبت.

let button = document.getElementById('button');
let myBody = document.body;
    myBody.innerHTML += "<h1>Welcome To CloseTag.com<h1>";
});
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات