Curso iMasters - Web Sites com Ajax - Capítulo 2

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.