Método prepend

O método prepend permite inserir no início de um elemento outro elemento. Como parâmetro, o método aceita um elemento, geralmente criado via createElement, ou uma string. É possível adicionar vários elementos ou strings de uma vez, listando-os separados por vírgula.

Sintaxe

elementoPai.prepend(elemento ou string);

Exemplo

Vamos criar um parágrafo, definir seu texto e colocá-lo na página, no início do bloco #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 da execução do código:

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

Exemplo

Vamos colocar vários parágrafos de uma vez no início do bloco #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 da execução do código:

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

Exemplo

Vamos usar uma string como parâmetro do método:

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

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

Resultado da execução do código:

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

Veja também

método append,
que insere elementos no final
método appendChild,
que insere elementos no final
método insertBefore,
que insere um elemento antes de outro elemento
método insertAdjacentElement,
que insere um elemento em um local especificado
método insertAdjacentHTML,
que insere tags HTML em um local especificado