Javascript insertAfter()

O Javascript possui a função insertBefore(), mas não possui uma função similar para inserir após o objeto como é de se esperar que existisse uma chamada insertAfter(), mas podemos inserir um elemento após um determinado objeto utilizando a insertBefore():

function insertAfter ( newObj, target)
{
  target.parentNode.insertBefore ( newObj, target.nextSibling);
}

Para entender esta função, vamos primeiramente ver a sintaxe do comando insertBefore():

• Função: insertBefore()
• Descrição: Insere um elemento ao final do documento ou após um elemento especificado.
• Sintaxe: elemento.insertBefore ( param1, param2)
• Parâmetros:
  • param1: REQUERIDO – Novo elemento a ser adicionado.
  • param2: OPCIONAL – Elemento que se especificado o novo elemento (param1) será inserido após este. Se omitido, inserere no final.

Como a função insertAfter() que foi criada informa o “target”.nextSibling como segundo parâmetro, quando não ouver um nextSibling no elemento, será retornado nulo, e fará com que a função insertBefore() insira o elemento no final.

Podemos extender o DOM e adicionar esta função a todos os elementos, utilizando o seguinte código:

Element.prototype.insertAfter = function ( newObj)
{
  this.parentNode.insertBefore ( newObj, this.nextSibling);
}

Desta forma, podemos utilizar o comando insertAfter() como utilizamos o comando insertBefore(), tal como:

document.getElementById ( 'alvo').insertAfter ( objeto);

Para testar, clique aqui.

Simples e prático.