Manipulation du DOM avec JavaScript : suppression et création d'éléments

Question

Voici mon code en m'aidant uniquement des sessions : je n'ai pas forcément regardé s'il était optimisable, mais j'ai pu supprimer la div, ajouter les deux headers et créer le paragraphe :)
let div = document.querySelector("div");
div.remove();
let header = document.createElement("header");
header.textContent = "Bienvenue";
header.style.textAlign = "center";
header.style.backgroundColor = "#e3b04b";
document.body.append(header);
let deuxiemeHeader = document.createElement("header");
deuxiemeHeader.textContent = "Accueil / Une autre page";
deuxiemeHeader.style.backgroundColor = "#f1d6ab";
deuxiemeHeader.style.color = "#03659e";
document.body.append(deuxiemeHeader);
let p = document.createElement("p");
p.textContent = "Ceci est un paragraphe créé avec Javascript !";
document.body.append(p);

Louis-Nicolas Leuillet · Accepted Answer

Nickel, ton code fonctionne très bien ! Tu as compris l'essentiel de la manipulation du DOM : createElement -> configuration → append ;)
Pour la répétition des styles, ne t'en fais pas.
Plus tard tu pourras créer une petite fonction applyStyles(element, stylesObject) ou simplement utiliser des classes CSS avec classList.add() . Mais pour l'instant ton code est super propre.

Issam Lastab · Answer

Je viens de voir que le deuxième header contenait les liens de la page « Accueil » et « Une autre page » sur la correction ; je ferai gaffe la prochaine fois !

Manipulation du DOM avec JavaScript : suppression et création d'éléments

Formation JavaScript (legacy)