JavaScript HTML DOM - تغيير HTML
يسمح HTML DOM لجافا سكريبت بتغيير محتوى عناصر HTML.
تغيير محتوى HTML
أسهل طريقة لتعديل محتوى عنصر HTML هي باستخدام innerHTMLالخاصية.
لتغيير محتوى عنصر HTML ، استخدم بناء الجملة التالي:
document.getElementById(id).innerHTML = new HTML
هذا المثال يغير محتوى <p>العنصر:
مثال
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
شرح المثال:
- يحتوي مستند HTML أعلاه على
<p>عنصر بامتدادid="p1" - نستخدم HTML DOM للحصول على العنصر مع
id="p1" - تقوم JavaScript بتغيير محتوى (
innerHTML) هذا العنصر إلى "نص جديد!"
هذا المثال يغير محتوى <h1>العنصر:
مثال
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
شرح المثال:
- يحتوي مستند HTML أعلاه على
<h1>عنصر بامتدادid="id01" - نستخدم HTML DOM للحصول على العنصر مع
id="id01" - تقوم JavaScript بتغيير محتوى (
innerHTML) هذا العنصر إلى "عنوان جديد"
تغيير قيمة السمة
لتغيير قيمة سمة HTML ، استخدم بناء الجملة التالي:
document.getElementById(id).attribute = new value
يغير هذا المثال قيمة السمة src <img>لعنصر:
مثال
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
شرح المثال:
- يحتوي مستند HTML أعلاه على
<img>عنصر بامتدادid="myImage" - نستخدم HTML DOM للحصول على العنصر مع
id="myImage" - يغير JavaScript
srcسمة هذا العنصر من "smiley.gif" إلى "Landscape.jpg"
محتوى HTML ديناميكي
يمكن لـ JavaScript إنشاء محتوى HTML ديناميكي:
التاريخ: الأحد 30 يناير 2022 00:37:08 GMT + 0000 (التوقيت العالمي المنسق)
مثال
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
document.write ()
في JavaScript ، document.write()يمكن استخدامه للكتابة مباشرة إلى تدفق إخراج HTML:
مثال
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
لا تستخدم أبدًا document.write()بعد تحميل المستند. سيتم الكتابة فوق المستند.