[DOM] Ajouter une DIV dans une page web

Version imprimable

19/09/2007, 14h23
Nulenprogra

[DOM] Ajouter une DIV dans une page web

Bonjour,

ma question sera surement assez stupide...

je voudrais ajouter dynamiquement des DIV dans une page.

je les crées avec createElement, mais je n'arrive jamais à les afficher.
j'essaie avec un document.appendChild, sans succès

quelle est l'astuce ?

merci
19/09/2007, 14h28
E.Bzz

Bonjour,

Citation:

Envoyé par Nulenprogra

quelle est l'astuce ?

la FAQ ;)

A+
19/09/2007, 14h32
javatwister

sur une procédure comme ça, je pense qu'il va falloir s'entendre: il n'y a aucune astuce!
19/09/2007, 14h34
Nulenprogra

Hello,

je trouve bien qu'on peut ajouter à tout élément un autre élément (dans la faq une div dans une autre div).

mais y a-t-il moyen d'ajouter des div au document ?

donc pas divParent.appendChild, mais bien document.appendChild ?

Merci
19/09/2007, 14h48
javatwister

si tu vises la fin de page, demande

Code:

document.body.appendChild()

(body est comprise comme objet dom même s'il vaut mieux paraphraser par document.getElementsByTagName("body")[0] ou donner un id au body;
19/09/2007, 14h55
E.Bzz

Citation:

Envoyé par javatwister

si tu vises la fin de page

Et sinon, insertBefore(), comme ICI ...

A+
19/09/2007, 15h07
Nulenprogra

ok, je suis comblé !!

en fait, mon problème apparement aussi est que sous IE, je ne vois rien.

sous FF je vois le nouveau div.

Alors, il y a des restrcitions pour IE?

sous question: une fois ma nouvelle div crée, je peux lui donner l'event "onClick" ?

merci
19/09/2007, 15h19
E.Bzz

Citation:

Envoyé par Nulenprogra

sous question: une fois ma nouvelle div crée, je peux lui donner l'event "onClick" ?

Même lien FAQ, 2 paragraphes en-dessous :mrgreen:

Tu noteras que l'exemple donné fonctionne sous IE (6 en tous cas) ...

A+
19/09/2007, 15h27
E.Bzz

Citation:

Envoyé par E.Bzz

Même lien FAQ, 2 paragraphes en-dessous :mrgreen:

Par contre, il faut utiliser la 2° version proposer plutôt que setAttribute

Code:

MonDiv.onclick=function(){alert(this.indice)}

A+

j'essaie, mais ça marche pas.

quand je vois l'exmple, il ajoute une fonction à onclick, mais perso j'ai déjà ma fonction.
je l'appelle comment ? javascript:ma_fonction ?

et autre problème, j'essaie de la même manière d'ajouter une class à ma nouvelle div.
on fait la même chose ? monDIV.class="la_class" ?

heu... c'est pas pour rien que j'ai choisis mon pseudo

voilà mon code (qui marche pas, bien sur !):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function div_new() { var i = 4; var MonDiv=document.createElement('DIV'); MonDiv.innerHTML="div " +i; MonDiv.setAttribute("id",i); MonDiv.setAttribute("onclick","javascript:div_select(i)"); MonDiv.onclick="javascript:div_select(i)"; MonDiv.setAttribute("class","div_feux"); MonDiv.class="div_feux"; document.body.appendChild(MonDiv); }

Quelques corrections

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function div_new() {
	var i = 4;
	var MonDiv=document.createElement('div');
	MonDiv.innerHTML="div " +i;
	MonDiv.setAttribute("id",i);
//	MonDiv.setAttribute("onclick","javascript:div_select(i)");
	MonDiv.onclick=function() {div_select(i)};
//	MonDiv.setAttribute("class","div_feux");
	MonDiv.className="div_feux";
	document.body.appendChild(MonDiv);
		
}

Remarque : jamais de "javascript:" dans les évènement ...

A+

19/09/2007, 16h44
Nulenprogra

MERCI :yaisse2:

cela fonctionne parfaitement !

zetes super...

reste plus qu'a continuer le site ....
19/09/2007, 16h47
javatwister

et puis, tant quà faire, pas d'id numérique, pour me faire plaisir...
19/09/2007, 16h48
E.Bzz

Citation:

Envoyé par Nulenprogra

reste plus qu'a continuer le site ....

Bon courage ;)

A+