Création d'une page HTML complète avec innerHTML en JavaScript

Question

Je ne suis pas sûr d’avoir pris la route attendu par Louis… mais ça fonctionne ! document.body.innerHTML = `

Bienvenue

Ceci est un paragraphe créer avec JavaScript !

`;

Louis-Nicolas Leuillet · Accepted Answer

C'est une approche qui fonctionne effectivement mais ce n'est pas tout à fait ce qui est attendu dans l'exercice. En remplaçant tout le innerHTML du body d'un coup avec un template literal, tu contournes un peu le principe de manipulation du DOM. x)
L'idée de l'exercice, c'est plutôt d'utiliser les méthodes comme document.createElement() , element.appendChild() , element.textContent , etc. pour construire tes éléments un par un et les ajouter au DOM.
Essaie de refaire l'exercice avec cette approche, tu verras que c'est très formateur ! Bravo pour l'astuce

Alexandre Canivet · Answer

Merci pour le retour !
Effectivement, ma première solution contournait un peu l’objectif de l’exercice. Du coup j’ai tout refait depuis le début en construisant étape par étape chaque élément avant de l’intégrer au DOM.
J’en ai profité pour ajouter une petite fonction pour éviter la répétition dans la création des liens. Je suis plutôt content du résultat. C’était vraiment plus formateur, comme vous l’aviez dit.
Voilà le résultat :
// 1 - Supprimer le div avec l'id #a-supprimer
document.querySelector("#a-supprimer").remove();
// 2 - Création du header
const HEADER = document.createElement("header");
const H1 = document.createElement("h1");
HEADER.style.backgroundColor = "#e3b04b";
HEADER.style.textAlign = "center";
HEADER.style.padding = "40px 0";
H1.textContent = "Bienvenue";
H1.style.color = "#fff";
HEADER.append(H1);
// 3 - Création du sous-header
function createLink(link, text) {
const LINK = document.createElement("a");
LINK.href = link;
LINK.textContent = text;
LINK.target = "_blank";
return LINK;
}
const NAV = document.createElement("nav");
const SPAN = document.createElement("span");
NAV.style.backgroundColor = "#f1d6ab";
NAV.style.padding = "20px 10px";
SPAN.textContent = " / ";
NAV.append(
createLink("https://believemy.com/fr", "Accueil"),
SPAN,
createLink("https://www.google.com/", "Un autre lien"),
);
// 4 - Création du paragraphe
const PARAGRAPHE = document.createElement("p");
PARAGRAPHE.textContent = "Voici un paragraphe créé avec JavaScript !";
PARAGRAPHE.style.padding = "10px";
// 5 - Ajout des éléments au DOM
document.body.append(HEADER, NAV, PARAGRAPHE);

Louis-Nicolas Leuillet · Answer

Alors là c'est nickel !
Tu as vraiment bien compris le principe cette fois. La structure est propre, bien organisée étape par étape, et j'aime beaucoup l'idée de la fonction createLink() pour factoriser la création des liens.
Top :)

Création d'une page HTML complète avec innerHTML en JavaScript

Formation JavaScript (legacy)