[DOM] createNode et affectation de proprietés

Version imprimable

30/10/2008, 16h25
mapmip

[DOM] createNode et affectation de proprietés

bonjour,

voila je veux savoir comment on fait pour qu'au moment de la creation d'un noeud dans le DOM par le biais de la méthode createNode, peut on affecter des attributs à ce nouveau noeud créee ?

par exemple creation d'un DIV et on affecter un onclick ou un class

mzerci d'avance
30/10/2008, 16h44
SpaceFrog

http://www.developpez.net/forums/d53...ynamique-form/
30/10/2008, 17h27
mapmip

space frog, merci pour ton tutorial mais il est un peu compliqué pour moi, je ne suis pas un specialiste de javascript :oops:

n'y a t il pas plus simple :mouarf:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
<script type="text/javascript">
function foo(){
var mydiv=document.createElement('div');
with (mydiv){ 
 style.height="100px";
 style.width="300px";
 style.backgroundColor='#ff0000';
 style.color='white';
 style.fontSize="40px";
 innerHTML="c'est plus simple comme ça ?";
}
document.body.appendChild(mydiv);
}
</script>
</head>
<body onload="foo()">
</body>
</html>

Bonjour, je sais que ce sujet est vieux, mais j'ai un petit souci que je crois assez connexe pour éviter de démarrer un autre sujet... Et puis comme icadedt n'a même pas pris la peine de dire un petit merci, j'en profite pour le faire car je ne connaissait même pas le with :)

J'essaie d'ajouter un évènement onclick avec cette méthode mais je n'y arrive pas :(

Voici la partie de mon code qui pose problème:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 //Créer le lien de suppression var span=document.createElement('span'); with (span) { className="fakelink"; style.fontSize="10px"; innerHTML = "(Supprimer)"; onclick = "remLieu(" + id + ");"; } //Joindre les deux éléments elem.appendChild(span);
Le code que j'aimerais généré serait celui-ci:
Code:

1 2 <span class="fakelink" style="font-size:10px;" onclick="remLieu(345)">(Supprimer)</span>
J'ai essayé plusieurs variantes (edit: dans le block with):
Code:

1 2 3 4 5 onclick = function() { remLieu(id); };
Code:

1 2 3 4 5 onclick = function(id) { remLieu(id); }
Code:

1 2 3 4 5 6 7 onclick = function(id) { return function(){ remLieu(id); } }
Code:

1 2 addEventListener('click', remLieu(id), false);
Mais je n'arrive à rien :(

26/06/2009, 21h19
SpaceFrog

Code:

onclick = function(id){remLieu(id);};
26/06/2009, 21h24
FMaz
Hum
...

Problème #1:
en fait ca me passe [object mouseEvent]..

J'essaie donc avec la solution non-recommandée: Function("...");

Problème #2 ( résolu ):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 remLieu = function(id) { alert(id); } var id = 10; with (span) { // ... onclick=Function("remLieu(" + id + ")"); }
Résultat: undefined
Code:

1 2 3 4 5 6 7 8 9 10 11 12 remLieu = function(id) { alert(id); } var id = 10; with (span) { // ... } span.onclick = Function("remLieu("+id+")");
Résultat: 10

Je crois que le with() possède son propre scope. Les variables ne semble pas être accessible.
26/06/2009, 21h40
SpaceFrog

tu es dasn une boucle pour l'id ??

que fait la fonction remLieu

function pas Function

Voici les 2 fonctions intégrales:

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
 
	//Ajouter un lieu au tableau des lieux
	addLieu = function (id, nom)
	{
		if(searchLieu(id)===false)
		{
			arrLieux.push(id);
 
			//Créer le div
			var elem=document.createElement('div');
			with (elem)
			{
				id = "lieux_" + id; //Ne fonctionne pas, id est non accessible
				style.display = "block";
				innerHTML = nom + " ";
			}
			elem.id = "lieux_" + id; //Fonctionne bien
 
			//Créer le lien de suppression
			var span=document.createElement('span');
			with (span)
			{
				className="fakelink";
				style.fontSize="10px";
				innerHTML = "(Supprimer)";
			}
			span.onclick = Function("remLieu("+id+")");
 
			//Joindre les deux éléments
			elem.appendChild(span);
			$("listLieux").appendChild(elem);
		}
	}
 
	//Supprimer un lieu
	remLieu = function (id)
	{
		alert(id);
		var i = searchLieu(id);
		if(i !== false)
		{
			arrLieux = arrRemove(arrLieux, i);
			$("listLieux").removeChild($("lieux_" + id));
		}
	}

$("id") ... c'est parce que j'utilise prototype.

Function au lieu de function: Oui, je comprend la différence, seulement avec onclick = function(id){remLieu(id);}; ca me retourne non pas l'id, mais l'event handler [object mouseEvent].

Alors je me suis temporairement rabatu sur Function ... parce que ca semble fonctionner.

8O
oui curieusement le with semble interférer avec la portée de la variable.
Mais on peut le contourner comme ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<script type='text/javascript'>
function foo(bar){
var newObj=document.createElement('div');
with(newObj){
innerHTML="cliquez ici";
style.cursor="pointer";
onclick=function(){zinc(this.message)}
}
newObj.message=bar
document.body.appendChild(newObj)
}
zinc=function(msg){alert(msg)}
</script>
 
</head>
 
<body onload="foo('coucou')">
 
</body>

26/06/2009, 22h11
FMaz

Oui enfin, à mon sens, c'est drôlement compliqué pour absolument rien de plus comme façon de faire.

Mais ma question de tantôt demeure toujours d'actualité:

Comment faire pour passer un paramètre ( avec function, et pas Function ), sans toujours avoir le mouseEvent ... ?

Je veisn de tester ceci qui fonctionne

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type='text/javascript'>
function foo(bar){
var newObj=document.createElement('div');
with(newObj){
innerHTML="cliquez ici";
style.cursor="pointer";
onclick=function(){zinc(bar)}
}
 
document.body.appendChild(newObj)
}
zinc=function(msg){alert(msg)}
</script>

Étrange étrange.

J'ai remplacé:

Code:

1
2
3
4
5
6
7
8
 
with (span)
			{
				className="fakelink";
				style.fontSize="10px";
				innerHTML = "(Supprimer)";
			}
			span.onclick = Function("remLieu("+id+")");

Par ceci:

Code:

1
2
3
4
5
6
7
8
9
 
with (span)
			{
				className="fakelink";
				style.fontSize="10px";
				innerHTML = "(Supprimer)";
				onclick = function(){ remLieu(id); }
			}
			//span.onclick = Function("remLieu("+id+")");

Et mon code cesse simplement de fonctionner.