Méthode prepend

La méthode prepend permet d'insérer au début d'un élément un autre élément. Le paramètre de la méthode accepte un élément, généralement créé via createElement, ou une chaîne de caractères. Il est possible d'ajouter plusieurs éléments ou chaînes de caractères à la fois, en les listant séparés par des virgules.

Syntaxe

parent.prepend(élément ou chaîne);

Exemple

Créons un paragraphe, définissons son texte et plaçons-le sur la page au début du bloc #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);

Résultat de l'exécution du code :

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

Exemple

Plaçons plusieurs paragraphes à la fois au début du bloc #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);

Résultat de l'exécution du code :

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

Exemple

Utilisons une chaîne de caractères comme paramètre de la méthode :

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

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

Résultat de l'exécution du code :

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

Voir aussi

la méthode append,
qui insère des éléments à la fin
la méthode appendChild,
qui insère des éléments à la fin
la méthode insertBefore,
qui insère un élément avant un élément
la méthode insertAdjacentElement,
qui insère un élément à un emplacement donné
la méthode insertAdjacentHTML,
qui insère des balises à un emplacement donné