Dom et placement du script dans la page

13 oct. 2009, 11:53

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 :

<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 ^^

13 oct. 2009, 12:33

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);

13 oct. 2009, 12:48

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...

Code : Tout sélectionner

<body>
    <div id="show"></div>
</body>

Merci pour ton aide ^^

13 oct. 2009, 13:08

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...

Code : Tout sélectionner
<body> <div id="show"></div> </body>

C'est simple comme bonjour.

Code : Tout sélectionner

document.getElementById ('show').appendChild (title);

13 oct. 2009, 13:24

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>

13 oct. 2009, 13:31

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.

13 oct. 2009, 15:00

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é !

13 oct. 2009, 15:06

Pour manipuler le DOM, il faut d'abord qu'il soit chargé, d'où la nécessité d'utiliser l'événement onload.

Dom et placement du script dans la page

Qui est en ligne