Méthode append

La méthode append permet d'insérer à la fin 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.append(élément ou chaîne);

Exemple

Créons un paragraphe, définissons son texte et plaçons-le sur la page à la fin 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.append(p);

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

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

Exemple

Plaçons plusieurs paragraphes à la fois à la fin 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.append(p1, p2);

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

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>a</p>
  <p>b</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.append('!');

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

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

Exemple

Soit un ul. Plaçons-y 9 balises li, en faisant de leur texte les numéros d'ordre :

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

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

for (let i = 1; i <= 9; i++) {
  let li = document.createElement('li');
  li.textContent = i;
  parent.append(li);
}

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

html<ul id="parent">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

Exemple

Remplissons un tableau avec des tr et des td :

html<table id="table"></table>

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

for (let i = 1; i <= 3; i++) {
  let tr = document.createElement('tr'); // créons un tr
  
  // Remplissons le tr avec des td :
  for (let j = 1; j <= 3; j++) {
    let td = document.createElement('td'); // créons un td
    td.textContent = j; // écrivons-y du texte
    
    tr.append(td); // ajoutons le td créé à la fin du tr
  }
  
  table.append(tr); // ajoutons le tr créé à la fin du tableau
}

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

html<table id="table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Voir aussi