JavaScript HTML DOM - ændre HTML

HTML DOM tillader JavaScript at ændre indholdet af HTML-elementer.

ændre HTML-uddatastrømmen

JavaScript kan skabe dynamisk HTML-indhold:

I JavaScript,document.write() Kan bruges til at skrive direkte til HTML-uddatastrømmen:

Eksempel

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

Prøv det selv

Brug aldrig document.write() efter at have loaded dokumentet document.write(). Dette vil overskrive dokumentet.

ændre HTML-indhold

Den nemmeste måde at ændre indholdet af et HTML-dokument på er ved at bruge innerHTML egenskab.

For at ændre indholdet af et HTML-element, brug denne syntaks:

document.getElementById(id).innerHTML = ny tekst

Dette eksempel ændrer <p> Elementets indhold:

Eksempel

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

Prøv det selv

Eksempel forklaring:

  • Den ovenstående HTML-dokument indeholder et <p>-element med id="p1"
  • Vi brugte HTML DOM til at få dette element med id="p1"
  • JavaScript ændrer indholdet af dette element (innerHTML) til "Hello Kitty!"

Dette eksempel ændrer <h1> Elementets indhold:

Eksempel

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

Prøv det selv

Eksempel forklaring:

  • Den ovenstående HTML indeholder et <h1>-element med id="header"
  • Vi brugte HTML DOM til at få elementet med id="header"
  • JavaScript ændrer indholdet af dette element (innerHTML)

Ændre attributværdien

For at ændre værdien af en HTML-attribut skal du bruge følgende syntaks:

document.getElementById(id).attribut = ny værdi

Dette eksempel ændrer <img> elementets src Værdien af attributten:

Eksempel

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

Prøv det selv

Eksempel forklaring:

  • Den ovenstående HTML-dokument indeholder et <img>-element med id="myImage"
  • Vi bruger HTML DOM til at få fat i elementet med id="myImage"
  • JavaScript ændrer dette elements src-attribut fra "smiley.gif" til "landscape.jpg"