JavaScript HTML DOM - تغییر HTML

HTML DOM اجازه می‌دهد JavaScript محتوای عنصر HTML را تغییر دهد.

تغییر جریان خروجی HTML

JavaScript می‌تواند محتوای HTML دینامیک ایجاد کند:


در JavaScript،document.write() برای نوشتن مستقیم به جریان خروجی HTML استفاده می‌شود:

مثال

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

آزمایش کنید

هرگز پس از بارگذاری مستند از document.write(). این کار محتوای مستند را پوشش می‌دهد.

تغییر محتوای HTML

ساده‌ترین روش برای تغییر محتوای HTML مستند، استفاده از innerHTML خصوصیت.

برای تغییر محتوای عنصر HTML، از این نحوه استفاده کنید:

document.getElementById(id).innerHTML = text جدید

این مثال مقدار <p> محتوای عنصر:

مثال

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>
</body>
</html>

آزمایش کنید

توضیح مثال:

  • HTML مستند بالا یک عنصر <p> با id="p1" دارد
  • ما از HTML DOM برای دریافت این عنصر با id="p1" استفاده کردیم
  • JavaScript محتوای این عنصر (innerHTML) را به "Hello Kitty!" تغییر می‌دهد

این مثال مقدار <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" دارد
  • ما از HTML DOM برای دریافت عنصر با id="header" استفاده کردیم
  • JavaScript محتوای این عنصر را (innerHTML) تغییر می‌دهد

تغییر مقدار ویژگی

برای تغییر مقدار ویژگی HTML از این نحو استفاده کنید:

document.getElementById(id).ویژگی = new value

این مثال مقدار <img> عنصر src مقدار ویژگی:

مثال

<!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 این عنصر را از "smiley.gif" به "landscape.jpg" تغییر می‌دهد