document.createTextNode à partir d'array

Version imprimable

Bonjour,

je viens de débuter le javascript et j'essaye de faire un code qui va implémenter des balises html voici:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Design" />
   </head>
 
  <body>
<div id="divTD1">
</div>
 
    <script type="text/javascript">
	var textNodes = [
						document.createTextNode('JavaScript'),
						document.createTextNode('JScript'),
						document.createTextNode('ActionScript'),
						document.createTextNode('EX4')
					];	
	var tableau_ul = document.createElement('ul');
for (var i=0;i < textNodes.length; i++)
{
	// Création de l'élément
	var tableau_li[i] = document.createElement('li');
	//insertion des textnodes
	tableau_li[i].appendChild(textNodes[i]);	
	// insertion de l'élément dans ul
	tableau_ul.appendChild(tableau_li[i]);
}
	var conteneur_div = document.getElementById('divTD1');
	conteneur_div.appendChild(tableau_ul);
 
 
	if(typeof(tableau_li[0])=='undefined'){ 
alert(tableau_li[0] +' maVariable indéfinie'); 
} 
else{ 
alert(tableau_li[0] +' maVariable définie'); 
}
    </script>
  </body>
</html>

Comme il ne se passait rien j'ai rajouté un if avec alert pour voire si les variables existent mais toujours, je suis un peu perdu je dois vous avouer.

d'avance merci de vos réponses.

declares ton array avant de vouloir le remplir

Code:

1
2
3
4
5
	tableau_li=new Array()
for (var i=0;i < textNodes.length; i++)
{
	// Création de l'élément
 tableau_li[i] = document.createElement('li');

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
var textNodes = [
						document.createTextNode('JavaScript'),
						document.createTextNode('JScript'),
						document.createTextNode('ActionScript'),
						document.createTextNode('EX4')
					];	
 
var ul = document.createElement('ul');
for (var i=0;i < textNodes.length; i++){
	// Création de l'élément
	var li = document.createElement('li');
	//insertion des textnodes
	li.appendChild(textNodes[i]);	
	// insertion de l'élément dans ul
	ul.appendChild(li);
}
var conteneur_div = document.getElementById('divTD1');
conteneur_div.appendChild(ul);

Salut,

Ne serait-ce pas mieux que le tableau ne contienne que le texte ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
try{
	var	i,li,
		text=['Javascript','JScript','ActionScript','EX4'],
		elt=document.getElementById('divTD1'),
		ul=document.createElement('ul');
 
	for(i in text){
		li=document.createElement('li');
		li.appendChild(document.createTextNode(text[i]));
		ul.appendChild(li);
	}
	while(elt.hasChildNodes())elt.removeChild(elt.lastChild);
	elt.appendChild(ul);
}catch(e){}

06/09/2011, 15h24
okoweb
Citation:
Envoyé par Eric2a

Code:

1 2 3 try{ ... }catch(e){}
Magnifique organisation, mais pourquoi le try catch? Pour quelle utilité?
:ccool:
06/09/2011, 15h34
Eric2a

Si pour une raison (certes peu probable) quelconque, une exception est levée à l'appel d'une fonction alors le script ne sera pas intérrompu mais passera directement au bloc catch.
06/09/2011, 17h00
helkøwsky

merci

Merci à vous tous de vos réponses j'ai pu pleinement identifier mon problème et découvrir d'autres solutions.

pour ce qui est du code d'eric2a, je le trouve très propre mais peut-être trop élaboré pour niveau actuel, je le relirais d'ici qques jours :-).

Merci à vous.
06/09/2011, 17h54
Watilin

Citation:

Envoyé par Eric2a

Si pour une raison (certes peu probable) quelconque, une exception est levée à l'appel d'une fonction alors le script ne sera pas intérrompu mais passera directement au bloc catch.

… Qui est vide :koi: Dans le cas présent, il n'y a qu'une seule raison que le script échoue : si document.getElementById('divTD1') est null.

Il est bon de savoir exactement à quelle genre d'exception on a affaire avant de poser des try/catch. Je dirais même que celui-ci est contre-productif : s'il y a une erreur, elle est ignorée silencieusement et le script continue. Le fait que l'erreur ait été ignorée peut entraîner d'autres problèmes en aval. Ce genre de pratique nuit à la robustesse des applications, à mon humble avis.
06/09/2011, 19h05
NoSmoking

Citation:

Envoyé par Watilin

… Qui est vide :koi: Dans le cas présent, il n'y a qu'une seule raison que le script échoue : si document.getElementById('divTD1') est null.

Il est bon de savoir exactement à quelle genre d'exception on a affaire avant de poser des try/catch. Je dirais même que celui-ci est contre-productif : s'il y a une erreur, elle est ignorée silencieusement et le script continue. Le fait que l'erreur ait été ignorée peut entraîner d'autres problèmes en aval. Ce genre de pratique nuit à la robustesse des applications, à mon humble avis.

je partage cet avis , un contrôle sur l'existence de l'élément devrait être suffisant.
06/09/2011, 23h24
Eric2a

Ah oui, je pensais que TOUTES les méthodes DOM étaient susceptibles de soulever des exceptions.

Non seulement ce n'est pas le cas mais en plus...

Citation:

Les opérations DOM ne soulèvent des exceptions que dans des circonstances "exceptionnelles", c'est à dire, quand une opération est impossible à réaliser (soit pour des raisons logiques, parce que les données sont perdues, ou parce que la mise en œuvre est devenue instable)...

Source (en) : http://www.w3.org/TR/2000/REC-DOM-Le...ml#ID-17189187

:ccool: