Méthode insertBefore

La méthode insertBefore permet d'insérer un élément devant un autre élément. Elle est le plus souvent utilisée après la création d'un élément avec createElement. La méthode est appliquée au parent de l'élément devant lequel l'insertion aura lieu.

Syntaxe

parent.insertBefore(élément, devant qui insérer);

Exemple

Créeons un paragraphe et plaçons-le devant le deuxième paragraphe :

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

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

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

parent.insertBefore(p, before);

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

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

Exemple

Ajoutons un paragraphe au début de l'élément #parent. Pour cela, insérons notre paragraphe devant le premier enfant de #parent. Cet enfant peut être trouvé avec firstElementChild :

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

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

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

parent.insertBefore(p, parent.firstElementChild);

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

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

Exemple

Lors de la transmission d'un deuxième paramètre null, la méthode insertBefore fonctionne comme appendChild. En même temps, si l'élément n'a pas d'éléments enfants, firstElementChild retourne null. Par conséquent, l'ajout au début de l'élément est possible même lorsqu'il n'a pas d'éléments enfants :

<div id="parent"></div>

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

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

parent.insertBefore(p, parent.firstChild);

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

<div id="parent">
	<p>!</p>
</div>

Voir aussi

la méthode prepend,
qui insère des éléments au début
la méthode appendChild,
qui insère des éléments à la fin du parent
la méthode insertAdjacentElement,
qui insère un élément à un endroit donné
la méthode insertAdjacentHTML,
qui insère des balises à un endroit donné