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);