Générer du HTML en JavaScript

Après l'avoir sélectionné et écouté, vous allez maintenant découvrir comment vous pouvez générer le DOM depuis votre code JavaScript.

Il existe plusieurs méthodes plus ou moins propres, nous allons voir la plus propre, qui utilise des méthodes de création de nœuds et d'insertion dans le DOM.

Créer un élément HTML

Pour créer un élément HTML, on utilise la méthode document.createElement(). Cette méthode prend en paramètre le nom de l'élément à créer et retourne un objet représentant cet élément.

Exemple de document.createElement()

Imaginons que je veux créer une section :

let section = document.createElement('section');

Attacher un élément au DOM

Une fois créé, vous allez avoir besoin d'attacher cet élément au DOM pour qu'il soit visible sur la page web. Pour cela, vous pouvez utiliser la méthode appendChild() ou insertBefore() sur un nœud parent existant.

Attacher l'élément à la fin d'un élément parent

Lorsque vous voulez attacher un élément à la fin de la liste des éléments enfants, utilisez la méthode element.appendChild().

Pour l'utiliser, vous devrez au préalable avoir sélectionné l'élément parent à qui vous voulez attacher votre HTML.

Exemple d'appendChild

Imaginons que je veux ajouter un <li> dans un <ul> qui est déjà dans le code :

<ul id="crepe">
    <li>Oeufs</li>
    <li>Farine</li>
    <li>Lait</li>
</ul>

let crepe = document.getElementById('crepe');
let item = document.createElement('li');
crepe.appendChild(item);

Ajouter un élément juste avant un autre

Si par contre vous voulez ajouter votre nouvel élément HTML juste avant un autre vous allez utiliser la méthode element.insertBefore().

La méthode a été modifiée récemment ce qui la rend malheureusement moins intuitive :

parent.insertBefore(element, referenceElement);

parent: élément parent de celui devant queleul vous voulez ajouter
element: votre élément
referenceElement: l'élément devant lequel vous voulez ajouter votre élément

Exemple d'insertBefore

Reprenons notre exemple de <ul>, nous voulons rajouter un titre avant la liste pour préciser à quoi elle correspond :

<section>
    <ul id="crepe">
        <li>Oeufs</li>
        <li>Farine</li>
        <li>Lait</li>
    </ul>
</section>

let section = document.querySelector("section");
let crepe = document.getElementById('crepe');
let item = document.createElement('h3');
section.insertBefore(item, crepe);

Et si je veux construire toute la liste depuis le JavaScript ?

Rien ne vous empêche (c'est même très fréquent de le faire) de préparer toute une structure HTML depuis votre JavaScript et d'attacher des nœuds et leurs enfants :

Exemple de création d'un en-tête

<article id="post">
    <section>
        <p>Bla bla bla</p>
    </section>
</article>

let section = document.querySelector('#post section');
let header = document.createElement('header');
let title = document.createElement('h3');

header.appendChild(title);
section.insertBefore(header);

Nous avons placé un <header> qui contient un <h3> juste avant la section dans l'article.

Modifier le contenu des éléments HTML

Vider un élément HTML

Pour vider un élément HTML vous allez utiliser la propriété element.innerHTML:

Exemple de vidage d'élément

<ul id="crepe">
    <li>Oeufs</li>
    <li>Farine</li>
    <li>Lait</li>
</ul>

let crepe = document.getElementById('crepe');
crepe.innerHTML = '';

Rajouter du texte à un élément

Par contre lorsque vous voulez rajouter du contenu à un élément, on utilise une solution plus propre : document.createTextNode().

Exemple d'ajout de texte

Reprenons l'exemple de modification de la recette des crèpes :

<ul id="crepe">
    <li>Oeufs</li>
    <li>Farine</li>
    <li>Lait</li>
</ul>

let crepe = document.getElementById('crepe');
let item = document.createElement('li');

let itemText = document.createTextNode('Beurre'); // je créé mon texte
item.appendChild(itemText); // je l'ajoute dans mon li

crepe.appendChild(item);

Modifier les attributs de l'élément

Modifier l'id

let element = document.createElement('ul');
element.id = "list"; // j'ajoute un id à mon élément

Modifier les classes

let element = document.createElement('article');
element.classList.add('post');

Modifier le style

let element = document.createElement('article');
element.style.backgroundColor = "blue";

Modifier les attributs

let element = document.createElement('img');
element.setAttribute('src', 'image.png');
element.setAttribute('alt', 'Le texte alternatif');

Les éléments créés depuis JavaScript et les événements

Pour rajouter un écouteur d'événements à vos éléments créés depuis JavaScript ça se passe exactement comme lorsque vous voulez le faire pour un élément déjà présent dans le DOM. Vous n'avez simplement pas besoin d'utiliser un sélecteur :

let button = document.createElement('button');
let buttonText = document.createTextNode("Cliquez");
button.appendChild(buttonText);

button.addEventListener('click', function() {
    console.log('Le bouton a été cliqué');
});

12 January 2026