JavaScript - DOM HTML
JavaScript - DOM HTML (تعديل محتوى HTML)
🔸 يمكنك استخدام JavaScript لتعديل محتوى عناصر HTML مثل النصوص، العناوين، الروابط، الصور، الجداول، وغيرها مباشرة من خلال DOM.
---🔹 تغيير المحتوى باستخدام innerHTML
document.getElementById("demo").innerHTML = "<b>نص بخط عريض</b>";
📌 يسمح innerHTML
بإدخال تنسيقات HTML داخل العنصر.
🔹 تغيير خصائص عناصر HTML
document.getElementById("myImage").src = "pic.jpg";
document.getElementById("myLink").href = "https://google.com";
---
🔹 تغيير قيمة عنصر form
document.getElementById("username").value = "Mahmoud";
📌 مفيد في النماذج لملء البيانات تلقائيًا.
---🔹 تغيير النص باستخدام textContent
document.getElementById("demo").textContent = "نص بدون HTML";
📌 الفرق بين innerHTML
و textContent
هو أن الثانية لا تفسر وسوم HTML.
🔹 إضافة عنصر جديد داخل HTML
document.getElementById("container").innerHTML += "<p>فقرة جديدة</p>";
---
⚠️ ملاحظات مهمة
innerHTML
مفيد جدًا لكنه قد يُشكل خطر أمني إذا تم تمرير محتوى من مصادر غير موثوقة.- استخدم
textContent
لعرض النصوص بدون تنسيقات. - يمكن تعديل أي خاصية HTML باستخدام JavaScript بسهولة.
تعليقات
إرسال تعليق