Aller au contenu

Créer, ajouter et supprimer un élément

On peut avec JavaScript créer, ajouter et supprimer des éléments html à notre page.

Créer des éléments

On peut créer un élément en Javascript en utilisant la function createElement().

Syntaxe
document.createElement("nodename")
// nodename réprésente le nom de la balise html
Exemple d'utilisation
// Créer une nouvelle balise h1 et l'assigne dans la variable titre
let titre = document.createElement("h1");

Une fois l'élément créé, on peut le modifier et le manipuler comme quand on récupére un élément avec getElementbyId() par exemple.

script.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
// Création de l'élément h1
let titre = document.createElement("h1");
// Ajout du id "idTitre"
titre.id = "idTitre";
// Ajout de texte dans la balise
titre.innerText = "Le Titre";
// Ajout d'une classe "classTitre"
titre.classList.add("classTitre");
// Ajout d'un listener sur le click
titre.addEventListener("click", cliqueSurTitre);

Ajouter des éléments

Les méthodes append() et appendChild() sont utilisés pour ajouter des éléments dans le DOM, on va voir la méthode append(). Cette méthode prend en paramètre un élément HTLM ou du texte. On peut utiliser append() avec l'objet document ou avec un autre élément.

// Récupère l'élément avec le id containerExemple 
// (c'est un élément div pour l'exemple)
let monContainer = document.getElementById("containerExemple");
// Créer un élément h1
let titre = document.createElement("h1");
titre.innerText = "Le Titre";

// Ajouter l'élément créé dans le document, dans la page. La balise h1 
// sera ajouté à la suite des autres éléments à l'intérieur de la balise body.
document.body.append(titre);
// Ajouter l'élément créé dans l'élément monContainer. La balise h1 sera 
// ajouté à la suite des autres éléments à l'intérieur de l'élément avec le 
// id containerExemple.
monContainer.append(titre);

Supprimer des éléments

Pour supprimer un élément il suffit de le sélectionner et d'utiliser la méthode remove()

// Récupère l'élément avec le id containerExemple
let monContainer = document.getElementById("containerExemple");
// Supprime l'élément. Attention tous les éléments qui étaient à l'intérieur de cet élément seront aussi supprimé.
monContainer.remove();