Inserción de elementos en Javascript: insertBefore y appendChild

Método appendChild

El método appendChild permite insertar un elemento al final de otro.

Supongamos que tenemos este HTML:

<div>
 <p id="existente">Elemento existente</p>
</div>

Y queremos que pase a ser así:

<div id="contenedor">>
 <p id="existente">Elemento existente</p>
 <p id="nuevo">Elemento nuevo</p>
</div>

No habría más que utilizar el siguiente código Javascript:

elemento1 = document.createElement('p');
elemento1.appendChild(document.createTextNode('Elemento nuevo'));
elemento1.id = 'nuevo';
elemento2 = document.getElementById('contenedor');
elemento2.appendChild(elemento1);

Método insertBefore (o insert before)

El método insertBefore tiene una función similar a appendChild, solo que no inserta el elemento hijo justo al final del elemento padre, sino antes de un elemento concreto que hay que especificar.

Supongamos que tenemos este HTML:

<div>
 <p id="existente">Elemento existente</p>
</div>

Y queremos que pase a ser así:

<div>
 <p id="nuevo">Elemento nuevo</p>
 <p id="existente">Elemento existente</p>
</div>

No habría más que utilizar el siguiente código Javascript:

elemento1 = document.createElement('p');
elemento1.appendChild(document.createTextNode('Elemento nuevo'));
elemento1.id = 'nuevo';
elemento2 = document.getElementById('existente');
elemento2.parentNode.insertBefore(elemento1,elemento2);

Saber más

4 respuestas a «Inserción de elementos en Javascript: insertBefore y appendChild»

  1. ¿seguro que appendChild inserta un elemento al ‘FINAL’ de otro?…, creo que más bien ‘DENTRO’ de otro, sinó no sería hijo sujo… jejejjj , creo vamos… tampoco me hagas mucho caso…

  2. Lo inserta dentro y al final del elemento. Si insertamos un elemento ‘A’ en un elemento ‘P’, y dicho elemento ‘P’ tiene previamente un elemento ‘EM’ anidado, el elemento ‘A’ se insertará después del elemento ‘EM’, es decir, al final del elemento ‘P’.

  3. Muy bueno, pero tengo una duda, y si quiero añadir un elemento despues de otro pero que este elemento sea html?
    que tengo que hacer.

Los comentarios están cerrados.