[DOM] DOM document createElement

Version imprimable

SALUT
Voici j'utilise ce bout de code pour insérer un champ input ds une page html, a part le fait qu'il ne marche pas ds FF 2 (rrrrr!!!!!!) lorsque j'édite le code source de la page ds IE je ne vois pas mon nx champ input ds le code alors qu'il est sur la page. quelqu'un peut t'il me dire pourquoi.
j'ai decouvert sur ce forum une excellente discutions sur le theme createElement VS innerHTML
http://www.developpez.net/forums/sho...d.php?t=257967

cela devait finir ds la section contribution mais je ne le vois pas, c'est bien dommage, bien que je n'ai pas encore tout compris , ca a l'air tres interressant pour jongler d'un nav a l'autre.
si vous avez des infos je suis preneur
Code:

1 2 3 4 5 6 7 var element_sup=null; var section_invites=null; function nb_invite(){ element_sup=document.createElement("<input name='bidule' /><br>"); section_invites = document.getElementById("liste_invites"); section_invites.appendChild(element_sup); }//fin nb invite

11/02/2008, 15h27
le_chomeur

Salut a toi :)
et bienvenue dans le monde merveilleux du dom ;)
createElement te permet de créer des objets de façon dynamique sur une page HTML ...
on s'en sert également pour la gestion des documents xml ...
voici quelques exemple dans la faq concernant les tableaux :

http://javascript.developpez.com/faq/?page=Table

bon courage pour la suite de tes recherches ;)

J'aurais tenté un truc du genre :

Code:

1
2
3
4
if (document.all){
element_sup=document.createElement("<input name='bidule' /><br>");}
else {element_sup=document.createElement("input");
        elemnt_sup.name='bidule';}

bonjour,

Code:

1
2
3
4
5
6
7
8
9
10
11
 
var element_sup; 
var sautDeLigne;
 
element_sup = document.createElement("input");
elemnt_sup.name = "bidule";
 
document.body.appendChild(element_sup);
 
sautDeLigne = document.createElement("br");
document.body.appendChild(sautDeLigne);

:fleche: compatible IE et FF ;)

11/02/2008, 18h47
SpaceFrog

tu es sur pour le name Auteur ???

Code:

elemnt_sup.name = "bidule";

il me semble pourtant que MQDN dit qu'il n'est pas possible sous IE d'attribuer dynamiquement un name ?
ou alors c'est avec un element de formulaire précis ?

Citation:

Envoyé par SpaceFrog

tu es sur pour le name Auteur ???

Code:

elemnt_sup.name = "bidule";

il me semble pourtant que MQDN dit qu'il n'est pas possible sous IE d'attribuer dynamiquement un name ?
ou alors c'est avec un element de formulaire précis ?

effectivement, il semblerait que ce soit pour des éléments précis (les éléments de formulaire) :
http://www.developpez.net/forums/sho...34&postcount=6

[edit]
petite correction :oops: La discussion dont j'ai donné le lien parle des éléments déjà présents dans la page et non des éléments créés dynamiquement.

Donc pour les éléments créés dynamiquement :

J'ai fait ce script :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body> <input type="button" name="bouton1" value="ajouter un input" onclick="ajouteInput()"/> <input type="button" name="bouton2" value="ajouter un span" onclick="ajouteSpan()" /> <input type="button" name="bouton3" value="Lister les name" onclick="ListeName()"/> <br><br><br><br> </body> </html>
La fonction ListeName() recherche les éléments par name

Pour IE, l'attribut length de document.getElementsByName() retourne toujours 0.
Pour Firefox (pour qui getElementsByName() est une fonction "dépréciée"), la fonction retourne toujours 0 quel que soient le nombre de span créés, mais donne bien le nombre d'input ayant pour name "unInput" présents dans la page.

Mais cet autre script montre que les éléments ont bien un attribut name défini : (j'ai légèrement modifié la fonction ListeName(), pas les fonctions d'ajout).
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 <html> <head> <title></title> <script type="text/javascript">  </script> </head> <body> <input type="button" name="bouton1" value="ajouter un input" onclick="ajouteInput()"/> <input type="button" name="bouton2" value="ajouter un span" onclick="ajouteSpan()" /> <input type="button" name="bouton3" value="Lister les name" onclick="ListeName()"/> <br><br><br><br> </body> </html>
La fonction ListeName() recherche les éléments par tagName. Ensuite une boucle est réalisée sur les tableaux d'éléments renvoyés par getElementsByTagName(), et là (ô miracle :hola: ), IE ou FF affiche bien la valeur name des éléments créés dynamiquement :mrgreen: :aie:

.... de quoi devenir dingue :marteau:

Personnellement, j'ai abandonné la fonction getElementsByName() au profit de getElementsByTagName() quitte à faire une boucle par la suite.

[/edit]

12/02/2008, 09h43
bruno.rotrou

merci

slt et merci a vous tous , pour vos précieuses explications.
par contre personne m'a dit pourquoi je ne voyait pas ds le code source de la page les modification faites avec javascript.
par ex : si j'ajoute un champ input avec javascript et que je regarde le code source de ma page il napparait pas ????
merci
je suis encore ds la théorie et ds les test
petit a petit le type fait son site......
merci A+:D
12/02/2008, 10h20
Auteur

Le code source de la page est le contenu de la page au moment de son chargement. Donc si tu fais des modification via JS, celles-ci n'apparaîtront pas.

Si tu as Firefox utilise l'outil "Inspecteur DOM" (Outils > Inspecteur DOM) là tu verras l'arborescence de ta page et tu verras la modification de l'arbre DOM lors de l'ajout de tes éléments ;)
12/02/2008, 10h21
SpaceFrog

avec firefox dans l'extension web dev toolbar, il y a la possibilité de voir le code généré par javascript ...
12/02/2008, 10h34
le_chomeur

Citation:

slt et merci a vous tous , pour vos précieuses explications.
par contre personne m'a dit pourquoi je ne voyait pas ds le code source de la page les modification faites avec javascript.
par ex : si j'ajoute un champ input avec javascript et que je regarde le code source de ma page il napparait pas ????
merci

Si par firefox, en faisant une sélection de tes éléments puis "code source de la sélection" tu pourras voir le code généré :)
12/02/2008, 11h36
bruno.rotrou

extra

:king:extra!!!!
vous êtes extra, pourquoi utilisent on encore internet explorer ?;)
je suis encore loin de ma destination mais j'y vais tout doucement.
en fait j'ai beaucoup de mal car ayant travaillé les sites précédents essentiellement en flash, je suis en peu pommé par tout les langages qui faut connaitre pour faire un site dynamique sans flash. bien que j'utilisais php comme passerelle avec un serveur et une bd.
c'est quand même beaucoup plus fastidieux avec html JS ajax php dom; je me ruine en bouquin....
putain .... il vas falloir en apprendre encore combien ????;)
12/02/2008, 11h39
SpaceFrog

Garde tes sous, les réponses tu les trouveras sur ce forum :mouarf:
12/02/2008, 11h44
le_chomeur

Ou alors des sous pour une ptite bière :yaisse2:
12/02/2008, 11h47
SpaceFrog

Excusez mon fillot ...
Je lui ai promis une bière ... et je n'ai pas encore tenu ma promesse :aie:
12/02/2008, 12h03
bruno.rotrou

pour la bière ça sera avec plaisir, le hic est 'où'
je ne suis pas inquiet et je vous imagine très bien trainer ds des rencontres binaires, alors peut être ds une de ces rencontres.
A+
et merci encore