Cet exercice s'inscrit dans le cadre des Mini-TP présentés dans le tutoriel. Afin de s'entraîner à créer avec le DOM, voici quatre petits TP, dont ceci est le second. Pour chacun d'eux, une structure DOM sous forme de code HTML vous est donnée, et il vous est demandé de recréer cette structure en utilisant le DOM en Javascript.
Utilisez le <div id="output"> pour insérer votre structure DOM. Pour ce second Mini-TP, le code que vous devez recréer est donné ci-dessous.
<div id="divTP2">
<p>Langages basés sur ECMAScript :</p>
É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
La manière longue et propre
C'est le corrigé de base, avec la belle technique comme elle doit être !
// On crée l'élément conteneur
var mainDiv = document.createElement('div');
mainDiv.id = 'divTP2';
// On crée tous les nœuds textuels, pour plus de facilité
var languages = [
document.createTextNode('JavaScript'),
document.createTextNode('JScript'),
document.createTextNode('ActionScript'),
document.createTextNode('EX4')
];
// On crée le paragraphe
var paragraph = document.createElement('p');
var paragraphText = document.createTextNode('Langages basés sur ECMAScript :');
paragraph.appendChild(paragraphText);
// On crée la liste, et on boucle pour ajouter chaque item
var uList = document.createElement('ul'),
uItem;
for (var i = 0, c=languages.length; i < c; i++) {
uItem = document.createElement('li');
uItem.appendChild(languages[i]);
uList.appendChild(uItem);
}
// On insère le tout dans mainDiv
mainDiv.appendChild(paragraph);
mainDiv.appendChild(uList);
// On insère mainDiv dans le #output
document.getElementById('output').appendChild(mainDiv);
