document.createTextNode à partir d'array

**helkøwsky** · 06/09/2011, 14h05

Bonjour,

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

Code :

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

**SpaceFrog** · 06/09/2011, 14h13

declares ton array avant de vouloir le remplir

Code :

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

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

**okoweb** · 06/09/2011, 14h30

Code :

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

**Eric2a** · 06/09/2011, 15h11

Salut,

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

Code :

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

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){}

**okoweb** · 06/09/2011, 15h24

Envoyé par Eric2a

Code :

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

1
2
3
try{
...
}catch(e){}

Magnifique organisation, mais pourquoi le try catch? Pour quelle utilité?

**Eric2a** · 06/09/2011, 15h34

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.

**helkøwsky** · 06/09/2011, 17h00

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.

**Watilin** · 06/09/2011, 17h54

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

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.

**NoSmoking** · 06/09/2011, 19h05

Envoyé par Watilin

… Qui est vide

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.

**Eric2a** · 06/09/2011, 23h24

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

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

document.createTextNode à partir d'array

JavaScript

Discussions similaires

Partager

Partager