Modifier la page

Agir sur le DOM

On a appris à lire des éléments. Maintenant, on les modifie. Tu peux changer le contenu, ajouter des éléments, modifier les styles — sans recharger la page !

Modifier le contenu texte

textContent lit ou modifie le texte d'un élément. Attention : il traite tout comme du texte brut. Si tu mets du HTML, il sera affiché tel quel, pas interprété.

HTML + JavaScript

<!-- HTML -->
<h1 id="titre">Bonjour</h1>
<p id="compteur">0</p>

// JavaScript
const titre = document.getElementById("titre");
titre.textContent = "Au revoir !";
// Le h1 affiche maintenant "Au revoir !"

let nombre = 0;
const compteur = document.getElementById("compteur");
compteur.textContent = 42;
// Le paragraphe affiche maintenant "42"

Modifier le HTML — innerHTML

innerHTML injecte du vrai HTML dans un élément. Plus puissant que textContent, mais à utiliser avec précaution.

JavaScript

const container = document.getElementById("container");

// Remplace le contenu par du HTML
container.innerHTML = `
  <h2>Nouveau titre</h2>
  <p>Nouveau paragraphe avec du <strong>texte en gras</strong>.</p>
`;

// Ajouter à la fin sans effacer le contenu existant
container.innerHTML += `<p>Une ligne de plus !</p>`;

⚠️

Sécurité ! N'utilise jamais innerHTML avec du texte saisi par l'utilisateur. Un utilisateur malveillant pourrait injecter du JavaScript dangereux — c'est une attaque XSS. Pour afficher du texte utilisateur, utilise toujours textContent.

Modifier les styles CSS

On modifie le style d'un élément via la propriété style. Les propriétés CSS s'écrivent en camelCase — pas de tirets.

JavaScript

const boite = document.querySelector("#boite");

// CSS : background-color → JS : backgroundColor
boite.style.backgroundColor = "#3b82f6";
boite.style.color            = "white";
boite.style.fontSize         = "24px";
boite.style.padding          = "1rem";
boite.style.borderRadius     = "8px";

classList — manipuler les classes CSS

Modifier les styles directement, c'est pratique. Mais le mieux, c'est d'avoir tes styles dans le CSS et de ajouter/retirer des classes avec JavaScript. C'est plus propre et facile à maintenir.

JavaScript

const menu = document.querySelector("#menu");

// Ajouter une classe
menu.classList.add("ouvert");

// Retirer une classe
menu.classList.remove("ouvert");

// Basculer (ajoute si absente, retire si présente)
menu.classList.toggle("ouvert");

// Vérifier si une classe est présente
if (menu.classList.contains("ouvert")) {
  console.log("Le menu est ouvert");
}

Créer et ajouter de nouveaux éléments

On peut créer de nouveaux éléments HTML et les insérer dans la page.

JavaScript

// 1. Créer un nouvel élément
const nouveauParagraphe = document.createElement("p");

// 2. Lui donner du contenu
nouveauParagraphe.textContent = "Je viens d'être créé par JavaScript !";
nouveauParagraphe.classList.add("message");

// 3. L'insérer dans la page
const container = document.getElementById("container");
container.appendChild(nouveauParagraphe);
// Le paragraphe est maintenant visible dans la page !

Modifier des attributs

JavaScript

const lien  = document.querySelector("a");
const image = document.querySelector("img");

// Lire un attribut
console.log(lien.getAttribute("href"));

// Modifier un attribut
lien.setAttribute("href", "https://monminilab.fr");
image.setAttribute("alt", "Une belle photo");

// Accès direct pour les attributs courants
lien.href   = "https://monminilab.fr";
image.src    = "nouvelle-image.jpg";
image.alt    = "Description";

// À retenir

element.textContent = "..." modifie le texte (sûr, pas de HTML)
element.innerHTML = "..." injecte du HTML (ne pas utiliser avec du texte utilisateur)
element.style.propriete = "valeur" modifie un style CSS directement
element.classList.add/remove/toggle/contains("classe") gère les classes CSS
document.createElement("balise") crée un nouvel élément
parent.appendChild(element) insère un élément à la fin d'un parent
element.setAttribute("attr", "valeur") modifie un attribut HTML