[DOM] AppendChild ne me veut pas

Version imprimable

Salut tout le monde

Voilà je m'essaie au dom avec ajax ...

Mais j'ai un peu de mal avec le dom, j'arrive pas à créer des balises ...
Ca foire juste en dessous de "//Modification de la table" et pourquoi donc ?

La variable div est correcte, j'ai testé ses attributs
Et pour diminuer la taille du code j'ai enlevé les fonction pour charger le doc xml & co.

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script>                        
                        function Action(xmlDoc)
                        {
                                var record = xmlDoc.getElementsByTagName('record'); //Array des record  
                                var nom = xmlDoc.getElementsByTagName('nom'); //Array des noms
                                var prenom = xmlDoc.getElementsByTagName('prenom');     //Array des prénoms
                                
                                var div = document.getElementById('xml');
 
                                //Modification de la table
                                var table = div.appendChild('table');
 
                                        //Entete
                                        tr = table.appendChild('tr');
                                        for(i = 0 ; i < record[0].childNodes.length ; i++) //On compte le nombre de champ par record
                                        {
                                                th = tr.appendChild('th');
                                                th.nodeValue(i);
                                        }
                                        
                                        //Corps
                                        tr = table.appendChild('tr');
                                        for(i = 0 ; i < record.length ; i++) //On compte le nombre de record
                                        {
                                                td = tr.appendChild('td');
                                                td.nodeValue(nom[i]);
                                        }
                        }
                        
 
</script>
	</head>
 
	<body>
		<input type="button" onclick="caca();" value="Créer Table" />
		<div id="xml">
		</div>
	</body>
</html>

Merci d'avance

quelques modifications a apporter...
le souci, c'est que tu essaye d'inserer des noeuds qui "n'existent pas"
Code:

1 2 3 4 5 6 var myDiv = document.getElementById('xml'); //Modification de la table var myTable = document.createElement( 'table' ); myDiv.appendChild( myTable );

Et bien voilà, un grand merci

J'ai réussi, merci beaucoup

Que pensez vous de ce petit script qui à partir de n'importe quel xml, génère un tableau html ? Sympatoche à faire en tout cas ^^

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
			//@Doc xml
			//@Element type
			//@domposition = Position de la table dans le document
			function tableau (xmldoc,elxml,idposition)
			{
				//Quelques nodeList utiles pour la suite
				var record = xmlDoc.getElementsByTagName(elxml); //Array des elements type	
 
				//Se positionner dans le document
				var pos = document.getElementById(idposition);
 
				//Modification de la table	
				var mytable = document.createElement('table'); //Je crée l'élément
				pos.appendChild(mytable); //Je l'insère
				var table = pos.lastChild ; //Je crée la variable chemin pour y accéder
 
					//Entete
					var mytr = document.createElement('tr');
					table.appendChild(mytr);
					var tr = table.lastChild ;
 
					for(x = 0 ; x < record[0].childNodes.length ; x++) //On compte le nombre de champ par record
					{
						//Gestion des <th>
						var myth = document.createElement('th');
						tr.appendChild(myth);
						var th = tr.lastChild ;
 
						//Valeur des <td>
						txt = document.createTextNode(record[0].childNodes[x].nodeName); 
						th.appendChild(txt);
					}
 
					//Corps
					for(y = 0 ; y < record.length ; y++) //On boucle sur les lignes
					{
						var mytr = document.createElement('tr');
						table.appendChild(mytr);
						var tr = table.lastChild ;
 
						for(x = 0 ; x < record[0].childNodes.length ; x++) //On boucle sur les colonnes
						{
							//Gestion des <td>
							mytd = document.createElement('td');
							tr.appendChild(mytd);
							var td = tr.lastChild ;
 
							//Valeur des <td>
							txt = document.createTextNode(record[y].childNodes[x].firstChild.nodeValue);
							td.appendChild(txt);
						}
					}
			}