Modifier le texte, le HTML, les attributs, les classes et les styles d'un élément, créer de nouveaux éléments et les insérer dans la page, en supprimer, et construire un menu dynamiquement.
Un snack de Marrakech met à jour son menu tous les jours. Plutôt que de réécrire le HTML, le menu est rangé dans un tableau JavaScript, et c'est le script qui construit la liste, ajoute le plat du jour en évidence et retire ce qui n'est plus disponible.
La liste #menu contient déjà deux plats.
| Instruction | Effet |
|---|---|
el.textContent = 'Harira' | remplace le texte (sûr) |
el.innerHTML = '<b>Harira</b>' | remplace le contenu HTML (attention aux saisies des visiteurs) |
el.setAttribute('href', '#menu') | modifie un attribut |
el.getAttribute('href'), el.removeAttribute('disabled') | lit, supprime un attribut |
img.src = 'harira.jpg', input.value = '' | raccourcis pour les attributs courants |
el.style.color = 'red' | style en ligne (propriétés en camelCase) |
el.classList.add('special') | ajoute une classe ; aussi remove, toggle, contains |
const li = document.createElement('li'); // 1. fabriquer
li.textContent = 'Harira'; // 2. remplir
li.classList.add('special');
menu.append(li); // 3. insérer à la fin
| Méthode | Place |
|---|---|
parent.append(el) / appendChild(el) | dernier enfant |
parent.prepend(el) | premier enfant |
el.before(nouveau), el.after(nouveau) | avant, après el |
parent.insertBefore(nouveau, reference) | avant reference |
li.remove(); // supprimer
ancien.replaceWith(nouveau); // remplacer
menu.innerHTML = ''; // vider
const pages = [['Accueil', '#'], ['Menu', '#menu'], ['Contact', '#contact']];
const nav = document.querySelector('#barre');
for (const [texte, lien] of pages) {
const a = document.createElement('a');
a.textContent = texte;
a.setAttribute('href', lien);
nav.append(a);
}
Changer le tableau pages suffit pour changer le menu sur tout le site.
Pour ajouter un cadre au mur, on le fabrique d'abord (createElement), on y met la photo (textContent), puis on l'accroche au mur (append). Tant qu'il n'est pas accroché, personne ne le voit.
const li = document.createElement('li'); li.textContent = 'Msemen au miel'; document.querySelector('#menu').append(li);
Plutôt que de changer chaque propriété de style une par une, on prépare un costume en CSS (.special) et on le met ou l'enlève avec classList.
li.classList.add('special');
li.classList.toggle('epuise'); Quelle est la différence entre el.textContent = '<b>Promo</b>' et el.innerHTML = '<b>Promo</b>' ? Laquelle est dangereuse avec un texte saisi par un visiteur ?
textContent affiche le texte tel quel : on voit littéralement <b>Promo</b>. innerHTML interprète le HTML : Promo s'affiche en gras. Avec un texte saisi par un visiteur, innerHTML est dangereux : il pourrait injecter du HTML ou du JavaScript (faille XSS). On utilise textContent.
Mettez le titre h2 en vert et en majuscules avec la propriété style, puis expliquez pourquoi classList est souvent préférable.
const h2 = document.querySelector('h2'); h2.style.color = 'green'; h2.style.textTransform = 'uppercase'; // propriétés CSS en camelCase // classList garde la présentation dans le CSS : plus facile à maintenir // et à modifier sans toucher au JavaScript.
Insérez un <li> « Thé à la menthe » au début de la liste #menu.
const the = document.createElement('li'); the.textContent = 'Thé à la menthe'; menu.prepend(the); // ou : menu.insertBefore(the, menu.firstElementChild);