Au sein du <div id="output"> se trouve une liste numérotée <ol id="zozor-books"> contenant six puces ; ajoutez-y deux puces :
une septième puce, intitulée Zozor à Pôle emploi (ou Zozor au Forem si vous êtes belge) juste AVANT la puce Zozor en grève
une huitième puce, en dernière position, intitulée Zozor fait fortune (oui, comme ça l'histoire se finit bien).
Écrivez le code qui permet de faire ça. Dès que c'est fait, cliquez sur le bouton Exécuter le script pour exécuter le code.
Écrivez votre code
Console d'erreurs
Pas d'erreurs d'exécution ou de syntaxe
Rendu #output
Source HTML
Zozor à la ferme
Zozor à l'école
Zozor en vacances
Zozor en classes de neige
Zozor le syndicaliste
Zozor en grève
Solutions
La manière longue et propre
C'est le corrigé de base, avec la belle technique comme elle doit être !
var books = document.getElementById('zozor-books');
var nojob = document.createElement('li');
nojob.appendChild(document.createTextNode('Zozor à Pôle emploi'));
var winner = document.createElement('li');
winner.appendChild(document.createTextNode('Zozor fait fortune'));
var last = books.getElementsByTagName('li');
if (last[5]) {
books.insertBefore(nojob, last[5]);
}
books.appendChild(winner);
Concis et moins pro avec innerHTML
On va utiliser innerHTML pour définir le texte des puces. Cela dit, si votre code n'est destiné qu'à un seul navigateur, qui n'est pas Internet Explorer (une extension pour Firefox ou Chrome par exemple), c'est mieux d'utiliser textContent. On évite aussi de tester si la dernière puce existe ; mais attention, c'est dangereux, car si elle n'existe pas, le script plantera !
var books = document.getElementById('zozor-books');
var nojob = document.createElement('li');
nojob.innerHTML = 'Zozor à Pôle emploi';
var winner = document.createElement('li');
winner.innerHTML = 'Zozor fait fortune';
books.insertBefore(nojob, books.getElementsByTagName('li')[5]);
books.appendChild(winner);
Un commentaire ? Un bug ? Contactez-moi !
Vous souhaitez proposer une autre solution ?
Un autre exercice ou une précision ?
Vous avez rencontré une erreur ?
Un exercice ne fonctionne pas ?
OpenClassrooms
Commentez directement dans le sujet dédié aux exercices
