JavaScript HTML DOM - Verander HTML

HTML DOM allows JavaScript to change the content of HTML elements.

Change HTML output stream

JavaScript can create dynamic HTML content:

In JavaScript,document.write() It can be used to directly write to the HTML output stream:

Voorbeeld

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

Probeer het zelf

Never use document.write() after the document has been loaded document.write(). This will overwrite the document.

Change HTML content

The simplest way to change the content of an HTML document is to use innerHTML Property.

To modify the content of an HTML element, use this syntax:

document.getElementById(id).innerHTML = new text

Deze voorbeeld wijzigt <p> Element content:

Voorbeeld

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

Probeer het zelf

Voorbeeld uitleg:

  • The above HTML document contains a <p> element with id="p1"
  • We use HTML DOM to get this element with id="p1"
  • JavaScript changes the content of the element (innerHTML) to "Hello Kitty!"

Deze voorbeeld wijzigt <h1> Element content:

Voorbeeld

<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>

Probeer het zelf

Voorbeeld uitleg:

  • The above HTML contains a <h1> element with id="header"
  • We used HTML DOM to get the element with id="header"
  • JavaScript wijzigt de inhoud van dit element (innerHTML)

Wijzig de waarde van het attribuut

Om de waarde van een HTML-eigenschap te wijzigen, gebruik dan de volgende syntaxis:

document.getElementById(id).attribuut = nieuwe waarde

Deze voorbeeld wijzigt <img> van het element src Waarde van het attribuut:

Voorbeeld

<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>

Probeer het zelf

Voorbeeld uitleg:

  • Het bovenstaande HTML-document bevat een <img> element met id="myImage"
  • We gebruiken HTML DOM om het element met id="myImage" te verkrijgen
  • JavaScript wijzigt de src-eigenschap van dit element van "smiley.gif" naar "landscape.jpg"