JavaScript HTML DOM - Mudar HTML

O HTML DOM permite que o JavaScript altere o conteúdo de elementos HTML.

Mudar o fluxo de saída HTML

JavaScript pode criar conteúdo HTML dinâmico:

No JavaScript,document.write() Pode ser usado para escrever diretamente no fluxo de saída HTML:

Exemplo

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

Experimente por sua conta

Nunca use document.write() após o carregamento do documento document.write(). Isso substituirá o documento.

Mudar o conteúdo HTML

A maneira mais simples de modificar o conteúdo de um documento HTML é usar innerHTML Atributo.

Para modificar o conteúdo de um elemento HTML, use esta sintaxe:

document.getElementById(id).innerHTML = Novo texto

Este exemplo muda <p> Conteúdo do elemento：

Exemplo

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

Experimente por sua conta

Explicação do Exemplo:

  • O documento HTML acima contém o elemento <p> com id="p1"
  • Usamos o HTML DOM para obter o elemento com id="p1"
  • JavaScript altera o conteúdo do elemento (innerHTML) para "Hello Kitty!"

Este exemplo muda <h1> Conteúdo do elemento：

Exemplo

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

Experimente por sua conta

Explicação do Exemplo:

  • O HTML acima contém um elemento <h1> com id="header"
  • Usamos o HTML DOM para obter o elemento com id="header"
  • JavaScript muda o conteúdo deste elemento (innerHTML)

Mudar o valor do atributo

Para modificar o valor de um atributo HTML, use a seguinte sintaxe:

document.getElementById(id).atributo = novo valor

Este exemplo muda <img> do Elemento src Valor da Propriedade:

Exemplo

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

Experimente por sua conta

Explicação do Exemplo:

  • O documento HTML acima contém um elemento <img> com id="myImage"
  • Usamos o DOM HTML para obter o elemento com id="myImage"
  • JavaScript altera o atributo src deste elemento de "smiley.gif" para "landscape.jpg"