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

javascriptparent.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 :

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

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

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

parent.prepend(p);

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

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

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

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

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

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

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

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

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

Voir aussi