Web Sites com Ajax

JavaScript

Método innerHTML

Interno é o equivalente de inner em inglês. Então innerHTML quer dizer o HTML interno de algo, sendo esse último um objeto, ou seja, uma tag.

Assim, para alterarmos ou inserirmos conteúdo ou uma marcação HTML em um objeto, utilizamos o método innerHTML.

Imaginemos uma tag div (ou qualquer outra) em sua marcação HTML e que essa tag esteja com o atributo ID definido como box. Então, podemos utilizar o método getElementById para acessá-la e usufruir do método innerHTML para manipular seu conteúdo ou marcação HTML.

Vejamos um exemplo de como alterar o conteúdo de uma tag:

var obj = document.getElementById("box");
obj.innerHTML = "Este será o novo conteúdo.";

Vejamos o exemplo acima em ação neste link Alterar o conteúdo de uma tag.

Vejamos um exemplo de como alterar a marcação HTML de uma tag:

var obj = document.getElementById("box");
obj.innerHTML = "<h1>Esta é a nova marcação HTML desta tag.</h1>";

Vejamos o exemplo acima em ação neste link Alterar marcação HTML de uma tag.

Utilizando o operador de atribuição += podemos acrescentar conteúdo ao conteúdo já existente de uma tag como marcação HTML.

Observe esta marcação HTML:

<div id="box">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
</div>

Vamos supor que queremos inserir um título de primeiro nível (h1) acima do parágrafo existente na marcação acima. Para tal procedimento faremos assim:

var obj = document.getElementById("box");
var novaMarcacao = "<h1>Título deste parágrafo.</h1>";
obj.innerHTML = novaMarcacao += obj.innerHTML;

Vejamos esse exemplo na página Adicionar marcação HTML e conteúdo a uma tag.