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

تعليقات

المشاركات الشائعة من هذه المدونة

C# - Arrays

Entity Framework - ما هو ORM؟ ونبذة عن Dapper وNHibernate

Entity Framework - مقدمة عن Entity Framework