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

JavaScript

Método insertBefore

Em unidades anteriores, vimos os métodos utilizados para criar (createElement) e inserir (appendChild) um elemento no documento.

Você deve ter notado que o método appendChild insere o objeto sempre como o último filho (child) de um elemeto pai (parent).

Em certas ocasiões isto pode ser inconveniente, pois, em determinados momentos, precisamos inserir algum elemento em um local específico e não como o último filho de um pai.

Portanto, pensando nessa necessidade, utilizamos o método insertBefore ao invés do appendChild, pois assim inserimos a tag onde desejamos.

Vamos observar um exemplo utilizando o método insertBefore:


		// 1º

		var newElement = document.createElement(what); 

		// 2º

		newElement.appendChild(document.createTextNode("Título do parágrafo"));

		// 3º

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

		// 4º

		var parentTag = referencia.parentNode; 

		// 5º

		parentTag.insertBefore(newElement, referencia);

Vejamos o exemplo neste link Método: insertBefore.

Agora vamos compreender o exemplo acima:

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 (para sabermos onde inserir o novo elemento, ou seja, anterior a qual elemento).