JavaScript DOM Create Element
انشاء عناصر جديدة داخل صفحة HTML بلغة جافا سكريبت
ستتعلم في هذا الدرس كيفة انشاء عناصر جديدة داخل صفحة HTML بلغة جافا سكريبت عن طريق الشجرة DOM Tree ايضاً بعد عملية الأنشاء يجب أن تقوم بأضافة محتوي لهذا العنصر ثم الحاقة داخل عنصر أخر في صفحة HTML.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات chevron_left JavaScript DOM Create Element chevron_left JavaScript
DOM Create Element JavaScript
انشاء عناصر جديدة داخل صفحة HTML بلغة جافا سكريبت
</>
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>";
});
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
