Método createElement

El método createElement permite crear un nuevo elemento pasando el nombre de la etiqueta como parámetro. Después de la creación, se puede trabajar con el elemento como con un elemento normal, y también se puede añadir a la página con los métodos prepend, append, appendChild, insertBefore o insertAdjacentElement.

Si se guarda el resultado de createElement en una variable, en esta variable habrá un elemento tal como si lo hubiéramos obtenido a través de querySelector o getElementById. La única diferencia es que nuestro elemento no estará colocado en la página. Por lo demás, podemos cambiarle su innerHTML, atributos, asignar manejadores de eventos y finalmente colocarlo en la página.

Sintaxis

document.createElement('nombre de la etiqueta');

Ejemplo

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

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

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>

Ejemplo

Dado un ul. Vamos a colocar en él 9 etiquetas li, y que su texto sean los números ordinales:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	parent.appendChild(li);
}

Resultado de ejecutar el código:

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

Ejemplo

Vamos a asignar manejadores de eventos a los elementos al insertarlos:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	
	li.addEventListener('click', function() {
		alert(this.textContent);
	});
	
	parent.appendChild(li);
};

Véase también

método cloneNode,
que permite clonar un elemento
método createTextNode,
que permite crear un nuevo nodo de texto