[DOM] DOM document createElement

**bruno.rotrou** · 11/02/2008, 15h20

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**le_chomeur** · 11/02/2008, 15h27

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

**SpaceFrog** · 11/02/2008, 15h38

J'aurais tenté un truc du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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';}

**Auteur** · 11/02/2008, 18h36

bonjour,

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

compatible IE et FF

**SpaceFrog** · 11/02/2008, 18h47

tu es sur pour le name Auteur ???

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**Auteur** · 11/02/2008, 19h47

Envoyé par SpaceFrog

tu es sur pour le name Auteur ???

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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">
<!--
function ajouteInput()
{
var element_sup;
var sautDeLigne;
 
element_sup = document.createElement("input");
element_sup.name = "unInput";
 
document.body.appendChild(element_sup);
 
sautDeLigne = document.createElement("br");
document.body.appendChild(sautDeLigne);
}
 
function ajouteSpan()
{
var element_sup;
var sautDeLigne;
 
 
element_sup = document.createElement("span");
element_sup.name = "unSpan";
 
document.body.appendChild(element_sup);
element_sup.appendChild(document.createTextNode("ceci est un span"));
 
sautDeLigne = document.createElement("br");
document.body.appendChild(sautDeLigne);
}
 
 
function ListeName()
{
 var n = document.getElementsByName("unInput").length;
 var m = document.getElementsByName("unSpan").length;
 var msg;
 
 msg = "Nombre d' Input 'unInput' : " + n + "\n";
 msg += "Nombre de span 'unSpan' : " + m;
 alert(msg);
 
}
//-->
</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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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">
<!--
function ajouteInput()
{
var element_sup;
var sautDeLigne;
 
element_sup = document.createElement("input");
element_sup.name = "unInput";
 
document.body.appendChild(element_sup);
 
sautDeLigne = document.createElement("br");
document.body.appendChild(sautDeLigne);
}
 
function ajouteSpan()
{
var element_sup;
var sautDeLigne;
 
 
element_sup = document.createElement("span");
element_sup.name = "unSpan";
 
document.body.appendChild(element_sup);
element_sup.appendChild(document.createTextNode("ceci est un span"));
 
sautDeLigne = document.createElement("br");
document.body.appendChild(sautDeLigne);
}
 
 
function ListeName()
{
 var tabInput = document.getElementsByTagName("input");
 var tabSpan = document.getElementsByTagName("span");
 
 var n, i, noms;
 
 n = tabInput.length;
 
 noms = "Nom des Input :\n";
 for (i=0; i<n; i++)
 {
    noms += tabInput[i].name + " ";
 }
 
 n = tabSpan.length;
 
 noms += "\nNom des Span :\n";
 for (i=0; i<n; i++)
 {
    noms += tabSpan[i].name + " ";
 }
 
 
 alert(noms);
 
}
//-->
</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

), IE ou FF affiche bien la valeur name des éléments créés dynamiquement

.... de quoi devenir dingue

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

[/edit]

**bruno.rotrou** · 12/02/2008, 09h43

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+

**Auteur** · 12/02/2008, 10h20

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

**SpaceFrog** · 12/02/2008, 10h21

avec firefox dans l'extension web dev toolbar, il y a la possibilité de voir le code généré par javascript ...

**le_chomeur** · 12/02/2008, 10h34

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é

**bruno.rotrou** · 12/02/2008, 11h36

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

**SpaceFrog** · 12/02/2008, 11h39

Garde tes sous, les réponses tu les trouveras sur ce forum

**le_chomeur** · 12/02/2008, 11h44

Ou alors des sous pour une ptite bière

**SpaceFrog** · 12/02/2008, 11h47

Excusez mon fillot ...
Je lui ai promis une bière ... et je n'ai pas encore tenu ma promesse

**bruno.rotrou** · 12/02/2008, 12h03

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

[DOM] DOM document createElement

JavaScript

Discussions similaires

Partager

Partager