تغییر محتوای عناصر HTML

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

نحوه استفاده:

document.getElementById(id).innerHTML=new HTML

در مثال زیر، محتوای عنصر با شناسه "p1" تغییر داده شده است:

مثال (تغییر محتوای عناصر HTML در JavaScript)

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>
خودتان امتحان کنید »

در مثال زیر، محتوای عنصر با شناسه "header" تغییر داده شده است:

مثال (تغییر محتوای عناصر HTML در JavaScript)

<!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> با شناسه "header" است.
  • با استفاده از مدل DOM عنصر با شناسه "header" را پیدا کرده ایم.
  • با استفاده از خصوصیت innerHTML در JavaScript محتوای عنصر را تغییر داده ایم.