Método prepend

El método prepend permite insertar al principio de algún elemento otro elemento. Como parámetro el método acepta un elemento, generalmente creado mediante createElement, o una cadena. Se pueden agregar varios elementos o cadenas a la vez, enumerándolos separados por comas.

Sintaxis

padre.prepend(elemento o cadena);

Ejemplo

Vamos a crear un párrafo, establecerle texto y colocarlo en la página al principio 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.prepend(p);

Resultado de ejecutar el código:

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

Ejemplo

Coloquemos varios párrafos a la vez al principio del bloque #parent:

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

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

let p1 = document.createElement('p');
p1.textContent = 'a';

let p2 = document.createElement('p');
p2.textContent = 'b';

parent.prepend(p1, p2);

Resultado de ejecutar el código:

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

Ejemplo

Usemos una cadena como parámetro del método:

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

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

Resultado de ejecutar el código:

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

Véase también

método append,
que inserta elementos al final
método appendChild,
que inserta elementos al final
método insertBefore,
que inserta un elemento antes de otro elemento
método insertAdjacentElement,
que inserta un elemento en un lugar especificado
método insertAdjacentHTML,
que inserta etiquetas en un lugar especificado