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 dernier. 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 dernier Mini-TP, le code que vous devez recréer est donné ci-dessous.
É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 = 'divTP4';
// Création de la structure du formulaire
var form = document.createElement('form');
var fieldset = document.createElement('fieldset');
var legend = document.createElement('legend'),
legendText = document.createTextNode('Uploader une image');
var center = document.createElement('div');
form.action = 'upload.php';
form.enctype = 'multipart/form-data';
form.method = 'post';
center.setAttribute('style', 'text-align: center');
legend.appendChild(legendText);
fieldset.appendChild(legend);
fieldset.appendChild(center);
form.appendChild(fieldset);
// Création des champs
var label = document.createElement('label'),
labelText = document.createTextNode('Image à uploader :');
var input = document.createElement('input');
var br = document.createElement('br');
var submit = document.createElement('input');
input.type = 'file';
input.id = 'inputUpload';
input.name = input.id;
submit.type = 'submit';
submit.value = 'Envoyer';
label.htmlFor = 'inputUpload';
label.appendChild(labelText);
center.appendChild(label);
center.appendChild(input);
center.appendChild(br);
center.appendChild(br.cloneNode(false)); // On clone, pour mettre un deuxième <br />
center.appendChild(submit);
// On insère le formulaire dans mainDiv
mainDiv.appendChild(form);
// On insère mainDiv dans le #output
document.getElementById('output').appendChild(mainDiv);
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
