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 بسهولة.