Tutorial básico do JavaScript

Objetos do JavaScript

Funções do JavaScript

HTML DOM JS

BOM do navegador JS

Tutorial básico do AJAX

Manual de referência do JavaScript

JS DOM alterar CSS Seletor JS HTML DOM

JS DOM alterar conteúdo HTML

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

alterar o conteúdo HTML

A maneira mais simples de alterar o conteúdo de um elemento HTML é usarinnerHTMLpropriedade.

Para alterar o conteúdo de um elemento HTML, utilize a seguinte sintaxe:

element.innerHTML = text

Os seguintes exemplos utilizamid="para" mudar<p>O conteúdo do elemento:

Exemplo

!DOCTYPE html
<html>
<p id="para"></p>
<script>
document.getElementById("para").innerHTML = "Olá, mundo";
</script>
</html>

Teste veja‹/›

o exemplo abaixoid="para"com<p>O conteúdo do elemento:

Exemplo

!DOCTYPE html
<html>
<p id="para">Este é um parágrafo.</p>
<p id="result"></p>
<script>
var x = document.getElementById("para").innerHTML;
document.getElementById("result").innerHTML = x;
</script>
</html>

Teste veja‹/›

mudar o fluxo de saída

document.write()O método escreve uma string de texto no fluxo do documento.

Exemplo

!DOCTYPE html
<html>
<p>document.write() escreve uma string de texto na saída do documento:</p>
<script>
document.write(new Date());
</script>
</html>

Teste veja‹/›

Este método escreve o conteúdo no documento atual apenas durante a análise do documento.

Se você usar este método após o carregamento da página, ele substituirá todo o conteúdo existente no documento.

Exemplo

<button onclick="myFunc()">Clique em mim</button>
<script>
function myFunc() {
　　document.write(new Date());
}
</script>

Teste veja‹/›

alterar o valor da propriedade

Para alterar o valor de uma propriedade HTML, use a seguinte sintaxe:

element.attribute = new value

mudar<img>do elementosrco valor da propriedade:

Clique no botão para alterar o avatar:

o exemplo abaixoobterhrefo valor da propriedade:

Exemplo

var x = document.getElementById("demo").href;

Teste veja‹/›

para adicionar novos elementos ao DOM

Você pode usardocument.createElement()O método cria novos elementos explicitamente no documento HTML.

Este método cria um novo elemento, mas não o adiciona ao DOM. Você deve executar essa operação em um passo separado:

　　//　Criar um novo h3Elemento
　　var newElem = document.createElement("h3");
　　//　e dar-lhe algum conteúdo
　　var newContent = document.createTextNode("Olá, pessoal!");

appendChild()O método adiciona o novo elemento a qualquer outro subnodo do nó pai especificadono final.

Exemplo

//　Adicionar nó de texto ao h recém-criado3
newElem.appendChild(newContent);　　
//　Adicionar o novo elemento e seu conteúdo ao DOM
document.body.appendChild(newElem);

Teste veja‹/›

Mas, se você quiser aplicar em qualquer outro subitemComeçarPara adicionar um novo elemento, você pode usar oinsertBefore()Método.

Exemplo

//Criar um novo h3Elemento
var newElem = document.createElement("h3");
//　Dê a ele algum conteúdo
var newContent = document.createTextNode("Hi there and greetings!");
//　Adicionar nó de texto ao h recém-criado3
newElem.appendChild(newContent);　　
//　Obter o Corpo
var body = document.body;
//　Inserir H3　antes do primeiro filho do BODY
body.insertBefore(newElem, body.childNodes[0]);

Teste veja‹/›

Remover elemento existente do DOM

Da mesma forma, você pode usar oremoveChild()Método para remover um nó filho do DOM.

Exemplo

var div = document.getElementById("demo");
div.removeChild(div.firstElementChild);

Teste veja‹/›

JS DOM alterar CSS Seletor JS HTML DOM