JavaScript HTML DOM muda o conteúdo HTML
HTML DOM permite JavaScript para alterar o conteúdo do elemento HTML.
Alterar o fluxo de saída HTML
JavaScript pode criar conteúdo HTML dinâmico:
A data de hoje é:
Em JavaScript, document.write () pode ser usado para escrever diretamente o conteúdo HTML para o fluxo de saída.
Exemplos
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
tente »
 | Nunca use document.write após o documento foi carregado (). Isso substitui o documento. |
|---|
Alterar o conteúdo HTML
Use innerHTML atribuir maneira mais fácil de modificar o conteúdo HTML.
Para alterar o conteúdo do elemento HTML, use esta sintaxe:
document.getElementById(id).innerHTML=新的 HTML
Este exemplo altera o conteúdo do elemento <p>:
Exemplos
<Html>
<Body>
<P id = "p1"> Olá mundo! </ P>
<Script>
document.getElementById ( "P1") innerHTML = "novo texto !.";
</ Script>
</ Body>
</ Html>
<Body>
<P id = "p1"> Olá mundo! </ P>
<Script>
document.getElementById ( "P1") innerHTML = "novo texto !.";
</ Script>
</ Body>
</ Html>
tente »
Este exemplo altera o conteúdo do <h1> elemento:
Exemplos
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
tente »
Exemplos de explicar:
- O documento HTML acima que contém id = "header" da <h1> elemento
- Nós usamos o HTML DOM para obter o id = elemento de "header"
- JavaScript alterações nesta conteúdo do elemento (innerHTML)
Alterar os atributos HTML
Para alterar as propriedades de um elemento HTML, use esta sintaxe:
document.getElementById(id).attribute=新属性值
Este exemplo altera o elemento de atributo src <img>:
Exemplos
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
tente »
Exemplos de explicar:
- O documento HTML acima que contém id = "imagem" do elemento <img>
- Nós usamos o HTML DOM para obter o id = elemento "imagem"
- JavaScript alterar as propriedades deste elemento (o "smiley.gif" a "landscape.jpg")