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
parent.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 :
<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.append(p);
Résultat de l'exécution du code :
<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 :
<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.append(p1, p2);
Résultat de l'exécution du code :
<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 :
<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
parent.append('!');
Résultat de l'exécution du code :
<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 :
<ul id="parent"></ul>
let 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 :
<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 :
<table id="table"></table>
let 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 :
<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
-
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 -
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 endroit spécifié -
la méthode
insertAdjacentHTML,
qui insère des balises à un endroit spécifié
