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

Quand le chargement d'un fichier html est terminé, on a accès à un objet document qui représente la "node" principale du document, c'est-à-dire l'élément le plus haut dans la hiérarchie des éléments de la page. En Javascript on utilise document pour accéder à ces méthodes.

Créer des éléments

On peut créer un élément en Javascript en utilisant la méthode createElement.

Syntaxe

document.createElement("nodename")
// nodename réprésente le nom de la balise html

Exemple

// 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().

let titre = document.createElement("h1");
titre.id = "idTitre";
titre.innerText = "Le Titre";
titre.classList.add("classTitre");
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();