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

javascriptpadre.prepend(elemento o cadena);

Ejemplo

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

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

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

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

parent.prepend(p);

Resultado de ejecutar el código:

html<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:

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

javascriptlet 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:

html<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:

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

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

Resultado de ejecutar el código:

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

Véase también