Création et insertion d'éléments en JavaScript

Maintenant, nous allons apprendre à créer de nouveaux éléments DOM via JavaScript, puis à les ajouter sur la page. Pour cela, la méthode createElement est utilisée. Le paramètre de cette méthode doit être le nom de la balise qui doit être créée.

Si le résultat de createElement est enregistré dans une variable, cette variable contiendra un élément comme si nous l'avions obtenu via querySelector.

La seule différence - notre élément ne sera pas placé sur la page. Sinon, nous pouvons changer son texte, ses attributs, lui attacher des gestionnaires d'événements et finalement le placer sur la page.

Pour placer le nouvel élément sur la page, la méthode appendChild est utilisée. Cette méthode doit être appliquée à l'élément dans lequel nous voulons placer notre élément. Et le paramètre de la méthode doit être notre nouvel élément, créé précédemment via createElement.

Regardons un exemple pratique. Supposons que nous ayons une div, et dedans - plusieurs paragraphes :

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

Créons un paragraphe, définissons son texte et plaçons-le sur la page à la fin du bloc #parent :

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

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

parent.appendChild(p);

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

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

Étant donné un ol :

<ol id="elem"></ol>

Insérez à la fin un li avec le texte 'item'.

Étant donné un ol et un bouton :

<ol id="elem"></ol>
<button id="button">click me</button>

Faites en sorte qu'au clic sur le bouton, un li avec le texte 'item' soit ajouté à la fin de la liste.