دوم HTML يسمح جافا سكريبت لتغيير محتوى العناصر HTML.
تغيير دفق إخراج HTML
جافا سكريبت يمكن إنشاء محتوى HTML حيوي:
تاريخ:الشمس 6 نوفمبر 2016 19:23:35 GMT + 0800 (中国标准时间)
في جافا سكريبت، document.write() يمكن استخدامها لكتابة مباشرة إلى دفق إخراج HTML:
مثال
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
انها محاولة لنفسك » أبدا استخدام document.write() بعد تحميل المستند. فإنه سيتم الكتابة الوثيقة.
تغيير المحتوى 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>
انها محاولة لنفسك » يتغير هذا المثال محتوى و <h1> العنصر:
مثال
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>
انها محاولة لنفسك » وأوضح سبيل المثال:
- وتتضمن الوثيقة HTML فوق ل <h1> عنصر مع id="header"
- نحن نستخدم DOM HTML للحصول على عنصر مع id="header"
- وجافا سكريبت يغير المحتوى (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"
- نحن نستخدم DOM HTML للحصول على عنصر مع id="myImage"
- وجافا سكريبت يغير src السمة من هذا العنصر من "smiley.gif" إلى "landscape.jpg"
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 »