Page 1 sur 1
Dom et placement du script dans la page
Posté : 13 oct. 2009, 11:53
par hi-logik
Hi Everybody
Je me met au Dom javascript et j'ai essaie d'afficher un titre basique mais cela ne fonctionne pas !
voici mon code :
Code : Tout sélectionner
<script type="text/javascript">
var title = document.createElement("h1");
var txt = document.createTextNode("Hello World");
title.appendChild(text);
</script>
je me doute vu mon manque de maitrise, que quelque chose ne vas pas
je voulais savoir si il y'avais un emplacement particulier ou placer le script pour afficher mon text?
la je l'ai placer entre les balises body ! body ne devrait il pas être parent lui aussi ?
Merci ^^
Re: Dom et placement du script dans la page
Posté : 13 oct. 2009, 12:33
par Victor BRITO
Il est normal que ton ensemble de nœuds générés ne s'affiche pas, puisque tu ne l'as pas ajouté à l'arborescence existante du DOM. Ton code doit donc être complété.
Code : Tout sélectionner
var title = document.createElement ('h1');
var txt = document.createTextNode ('Hello World');
title.appendChild (text);
// On ajoute l'élément h1 aux éléments enfants de body
document.body.appendChild (title);
La méthode appendChild () ajoutera le nœud indiqué en paramètre
à la suite des nœuds enfants du nœud auquel on l'ajoute ; si le nœud à ajouter existe déjà parmi les nœuds enfants, le nœud enfant existant est supprimé et réinséré à son nouvel emplacement. Si tu veux, par exemple, que l'élément h1 soit le premier élément enfant de body, remplace la dernière ligne de code précédente par celle-ci :
Code : Tout sélectionner
document.body.insertBefore (title, document.body.firstChild);
Re: Dom et placement du script dans la page
Posté : 13 oct. 2009, 12:48
par hi-logik
Cool ça fonctionne !
Et si je voulais l'insérer dans un élément déjà existant sur la page ?
exemple : je voudrais ajouter l'élément dans le div show...
Merci pour ton aide ^^
Re: Dom et placement du script dans la page
Posté : 13 oct. 2009, 13:08
par Victor BRITO
Et si je voulais l'insérer dans un élément déjà existant sur la page ?
exemple : je voudrais ajouter l'élément dans le div show...
C'est simple comme bonjour.
Re: Dom et placement du script dans la page
Posté : 13 oct. 2009, 13:24
par hi-logik
je penses que la méthode est bonne mais bizarement chez moi ça ne fonctionne pas.
voici mon code :
Code : Tout sélectionner
<script type="text/javascript">
var title = document.createElement("h1");
var txt = document.createTextNode("Hello World");
title.appendChild(txt);
document.getElementById('show').appendChild(title);
</script>
mal ligne juste en dessous :
Code : Tout sélectionner
<div id="show" style="border:1px black solid; padding:10px; background: #268456;color: #FFF;"></div>
Re: Dom et placement du script dans la page
Posté : 13 oct. 2009, 13:31
par Victor BRITO
Mets ton élément script entre <head> et </head> et modifie le code comme suit :
Code : Tout sélectionner
function helloWorld ()
{
var title = document.createElement ('h1');
var txt = document.createTextNode ('Hello World');
title.appendChild(txt);
document.getElementById ('show').appendChild (title);
}
if (window.addEventListener) window.addEventListener ('load', helloWorld, false);
else if (window.attachEvent) window.attachEvent ('onload', helloWorld);
Autrement dit, il faut s'assurer que le JavaScript puisse s'exécuter une fois l'arborescence DOM initiale chargée, en faisant appel à un gestionnaire d'événement.
Re: Dom et placement du script dans la page
Posté : 13 oct. 2009, 15:00
par hi-logik
ok cool ça fonctionne avec ta 2ème méthode !
mais pourquoi la première n'a t'elle pas fonctionné alors qu'elle aurais du malgré avoir essayer entre les balise header ?
si j'ai bien compris javascript ne s'execute pas après le chargement du DOM ! es normal ?
car à cause de ça je suis obligé de faire appel au gestionnaire d'évènement contrairement à la première méthode proposé !
Re: Dom et placement du script dans la page
Posté : 13 oct. 2009, 15:06
par Victor BRITO
Pour manipuler le DOM, il faut d'abord qu'il soit chargé, d'où la nécessité d'utiliser l'événement onload.