Au sein du <div id="output"> se trouve un <span id="mascot"> hébergeant Zozor (c'est une image d'arrière-plan). Il faudrait remplacer ce <span> par la structure suivante, en HTML5:
<figure>
<img src="data/zozor-happy.png" alt="Photo de Zozor" />
<figcaption>Photo de Zozor</figcaption>
</figure>
É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
Solutions
De façon propre
var zozor = document.getElementById('mascot');
if (zozor) {
var figure = document.createElement('figure');
var img = document.createElement('img');
var figcaption = document.createElement('figcaption');
img.src = 'data/zozor-happy.png';
img.alt = figcaption.innerHTML = 'Photo de Zozor';
figure.appendChild(img);
figure.appendChild(figcaption);
zozor.parentNode.replaceChild(figure, zozor);
}
Remarquez la petite astuce qui consiste à affecter le chaîne 'Photo de Zozor' à figcaption.innerHTML, qui lui-même affecte ce contenu à img.alt. Vous gagnez une ligne de code !
Concis avec innerHTML
Même principe que le corrigé précédent, si ce n'est qu'on utilise innerHTML pour créer les éléments <img /> et <figcaption> :
var zozor = document.getElementById('mascot'), figure;
if (zozor) {
figure = document.createElement('figure');
figure.innerHTML = '<img src="data/zozor-happy.png" alt="Photo de Zozor" />' +
'<figcaption>Photo de Zozor</figcaption>';
zozor.parentNode.replaceChild(figure, zozor);
}
Notez qu'il est possible d'étaler le contenu d'un innerHTML sur plusieurs ligne, en utilisant le + de concaténation.
