Metodo prepend

Il metodo prepend consente di inserire all'inizio di un elemento un altro elemento. Come parametro il metodo accetta un elemento, generalmente creato tramite createElement, oppure una stringa. È possibile aggiungere più elementi o stringhe contemporaneamente, elencandoli separati da virgola.

Sintassi

genitore.prepend(elemento o stringa);

Esempio

Creiamo un paragrafo, impostiamogli del testo e inseriamolo nella pagina all'inizio del blocco #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);

Risultato dell'esecuzione del codice:

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

Esempio

Inseriamo più paragrafi contemporaneamente all'inizio del blocco #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);

Risultato dell'esecuzione del codice:

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

Esempio

Usiamo una stringa come parametro del metodo:

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

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

Risultato dell'esecuzione del codice:

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

Vedi anche

metodo append,
che inserisce elementi alla fine
metodo appendChild,
che inserisce elementi alla fine
metodo insertBefore,
che inserisce un elemento prima di un elemento
metodo insertAdjacentElement,
che inserisce un elemento in una posizione specificata
metodo insertAdjacentHTML,
che inserisce tag HTML in una posizione specificata