tutoriais mais recente desenvolvimento web
 

JavaScript HTML DOM - Mudando HTML


O DOM HTML permite JavaScript para alterar o conteúdo de elementos HTML.


Alterando o fluxo de saída HTML

JavaScript pode criar conteúdo HTML dinâmico:

Encontro:Sun 06 de novembro de 2016 19:23:35 GMT + 0800 (中国标准时间)

Em JavaScript, document.write() pode ser usado para escrever directamente para o fluxo de saída HTML:

Exemplo

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>
Tente você mesmo "

Nunca use document.write() depois que o documento é carregado. Ele irá substituir o documento.


Alterar conteúdo HTML

A maneira mais fácil de modificar o conteúdo de um elemento HTML é usando o innerHTML propriedade.

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

document.getElementById(id).innerHTML = new HTML

Este exemplo altera o conteúdo de um <p> elemento:

Exemplo

<html>
<body>

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

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

</body>
</html>
Tente você mesmo "

Este exemplo altera o conteúdo de um <h1> 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>
Tente você mesmo "

Exemplo explicou:

  • O documento HTML acima contém um <h1> elemento com id="header"
  • Nós usamos o HTML DOM para obter o elemento com id="header"
  • A JavaScript altera o conteúdo (innerHTML) desse elemento

Alterar o valor de um atributo

Para alterar o valor de um atributo HTML, use esta sintaxe:

document.getElementById(id).attribute=new value

Este exemplo altera o valor do atributo src de uma <img> elemento:

Exemplo

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>
Tente você mesmo "

Exemplo explicou:

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

Teste-se com exercícios!

Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »