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

JavaScript

"Método" insertAfter

Para início de conversa, preciso lhe informar que não existe o método insertAfter.

Porém, se em certos momentos precisamos inserir algum elemento anteriormente a um outro, em outros também precisaremos inserir algo posteriormente a um elemento específico.

Assim, para atingirmos ambos os objetivos (inserir um elemento anteriormente e posteriormente) utilizamos o método insertBefore, uma vez que somente ele existe.

Para conseguirmos o recurso de inserir posteriormente procedemos assim:

Marcação HTML:


			<div id="box">

			<h1 id="tit">Lorem ipsum dolor sit amet</h1>

			</div>

Script utilizado:


			// 1º

			var newElement = document.createElement(what); 

			// 2º

			newElement.appendChild(document.createTextNode("Ma quande lingues coalesce, li grammatica del resultant lingue es."));

			// 3º

			var referencia = document.getElementById("tit"); 

			// 4º

			var parentTag = referencia.parentNode; 

			// 5º

			parentTag.insertBefore(newElement, referencia.nextSibling);

Vejamos a demostração desse exemplo neste link Método: insertAfter

Agora vamos compreendê-lo:

Primeiramente, informarmos qual elemento será criado. Esse elemento é informado através do parâmetro (what) da função. Em seguida, inserimos conteúdo ao elemento criado.

No terceiro passo, fazemos referência a um elemento através do getElementById na variável referencia.

No quarto passo, criamos a variável parentTag, concedendo a ela o valor referencia.parentNode, ou seja, o nosso elemento como referência e especificando que ele será um nó pai (parentNode).

Para concluir, utilizamos o método insertBefore anexado a variável parentTag. Os atributos desse método são os seguintes: newElement (o elemento que será criado) e referencia.nextSibling (next = próximo; Sibling = irmão). Aqui está a diferença. Esses atributos informam que que o novo elemento será o próximo irmão da tag referenciada na variável referencia.

Bom, se a nova tag será o próximo irmão, quer dizer que ela será inserida posteriormente a tag informada como referência.