Creación e inserción de elementos en JavaScript

Ahora aprenderemos a crear nuevos elementos DOM a través de JavaScript, y luego agregarlos a la página. Para esto está diseñado el método createElement. Como parámetro de este método se debe pasar el nombre de la etiqueta que debe ser creada.

Si se registra el resultado de createElement en una variable, entonces en esa variable habrá un elemento tal, como si lo hubiéramos obtenido a través de querySelector.

La única diferencia - nuestro elemento no estará colocado en la página. Por lo demás podemos cambiar su texto, atributos, asignar manejadores de eventos y finalmente colocarlo en la página.

Para colocar el nuevo elemento en la página se aplica el método appendChild. Este método debe aplicarse al elemento dentro del cual queremos colocar nuestro elemento. Y como parámetro del método se debe pasar nuestro nuevo elemento, creado previamente mediante createElement.

Veamos un ejemplo práctico. Supongamos que tenemos un div, y dentro de él - varios párrafos:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Vamos a crear un párrafo, establecer su texto y colocarlo en la página al final del bloque #parent:

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

Resultado de ejecutar el código:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

Dado un ol:

<ol id="elem"></ol>

Insértale al final un li con texto 'item'.

Dado un ol y un botón:

<ol id="elem"></ol>
<button id="button">click me</button>

Haz que al hacer clic en el botón se agregue al final de la lista un li con texto 'item'.