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

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

Exemple

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

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

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

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

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

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

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

parent.insertBefore(p, parent.firstElementChild);

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

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

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

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

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

parent.insertBefore(p, parent.firstChild);

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

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

Voir aussi