JavaScript HTML DOM - ändra HTML

HTML DOM tillåter JavaScript att ändra innehållet i HTML-element.

ändra HTML-utdataströmmen

JavaScript kan skapa dynamiskt HTML-innehåll:

I JavaScript:document.write() Det kan användas för att skriva direkt till HTML-utdataströmmen:

Exempel

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

Prova själv

Använd aldrig document.write() efter att dokumentet har laddats. document.write(). Detta kommer att ersätta dokumentet.

ändra HTML-innehåll

Det enklaste sättet att ändra innehållet i HTML-dokumentet är att använda innerHTML egenskap.

För att ändra innehållet i HTML-element, använd följande syntax:

document.getElementById(id).innerHTML = ny text

Detta exempel ändrar <p> Elementets innehåll：

Exempel

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

Prova själv

Exempel förklaring:

  • Ovanstående HTML-dokument innehåller ett <p>-element med id="p1"
  • Vi använde HTML DOM för att få tag på detta element med id="p1"
  • JavaScript ändrar innehållet (innerHTML) för detta element till "Hello Kitty!"

Detta exempel ändrar <h1> Elementets innehåll：

Exempel

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

Prova själv

Exempel förklaring:

  • Ovanstående HTML innehåller ett <h1>-element med id="header"
  • Vi använde HTML DOM för att få tag på elementet med id="header"
  • JavaScript ändrar innehållet i detta element (innerHTML)

Ändra egenskapsvärdet

För att ändra värdet på en HTML-egenskaps värde, använd följande syntax:

document.getElementById(id).egenskap = ny värde

Detta exempel ändrar <img> elementet src Värdet för egenskapen:

Exempel

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

Prova själv

Exempel förklaring:

  • Ovanstående HTML-dokument innehåller ett <img>-element med id="myImage"
  • Vi använder HTML DOM för att få tag på elementet med id="myImage"
  • JavaScript ändrar denna elements src-egenskap från "smiley.gif" till "landscape.jpg"