انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 50
دورة جافا سكريبت

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
7
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
5,697
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

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؟

HTML 
document.createElement('tagName');

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

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

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

Create element append

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

HTML 
let apple = document.createElement('h1');
apple.innerText = "Welcome To CloseTag.com";
document.body.appendChild(apple);
جرّب بنفسك

Create element prepend

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

HTML 
let apple = document.createElement('h1');
apple.innerText = "Welcome To CloseTag.com";
document.body.prepend(apple);
جرّب بنفسك

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

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

Add element after click

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

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 في لغة جافا سكريبت.

HTML 
let myBody = document.body;
myBody.innerHTML += "<h1>Welcome To CloseTag.com<h1>";
جرّب بنفسك

Add element innerHTML Prepend

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

HTML 
let myBody = document.body;
myBody.innerHTML = "<h1>Welcome To CloseTag.com<h1> " + myBody.innerHTML;
جرّب بنفسك

Add element after click using innerHTML

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

HTML 
let button = document.getElementById('button');
let myBody = document.body;
    myBody.innerHTML += "<h1>Welcome To CloseTag.com<h1>";
});
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…