Ajout dynamique de divisions au document (DOM)

Version imprimable

Bonjour à tous,

ca fait un bout de temps que je n'ai pas fait de post.

Mon problème est de pouvoir créer dynamiquement des divisions et de les ajouter au document chaque fois qu'on clique sur le bouton d'ajout.
J'ai fait un petit code qui ne fonctionne pas et qui est le suivant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html> <head> <script type="text/javascript"> var count = 1; function addDiv() { var div = document.createElement("div"); div.setAttribute("name","mydiv"+count); div.setAttribute("id","mydiv"+count); document.body.appendChild(div); div.style.left = (100 + (count-1)*60)+"px"; div.style.top = (100 + (count-1)*60)+"px"; div.style.width = "50px"; div.style.height = "50px"; div.style.visibility="visible"; alert("clic sur Btn"); count += 1; } </script> </head> <body> <input name="btn" id="btn" type="button" value="Add" onclick="addDiv()"/> </body> </html>
je traine dessus depuis longtemps sans comprendre pourquoi ça ne fonctionne pas. L'exécution se fait sous firefox.

Merci d'avance pour votre aide

Bonsoir,

Ton code fonctionne mais il n'y a rien dans ton div :mouarf: et un div n'a pas d'attribut name

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
<html>
  <head>
    <script type="text/javascript">
      var count = 1;
      function addDiv() {
        var div = document.createElement("div");
 
        div.setAttribute("id","mydiv"+count);
        div.style.left = (100 + (count-1)*60)+"px";
        div.style.top = (100 + (count-1)*60)+"px";
        div.style.width = "50px";
        div.style.height = "50px";
		div.innerHTML="div num"+count;
		document.body.appendChild(div);
 
 
        alert("clic sur Btn");
        count += 1;
      }
    </script>
  </head>
  <body>
    <input name="btn" id="btn" type="button" value="Add" onclick="addDiv()"/>
  </body>
</html>

A+.

07/12/2010, 18h55
makao

Merci pour votre réaction. J'avais mis par erreur l'attribut name et en extrayant uniquement la partie nécessaire de tout le code j'omis de copier l'ajout de la partie ayant innerHtml.

J'ai bien tester le code que vous avez modifié mais l'autre problème qui se pose c'est le positionnement horizontal (position en x : left) qui ne fonctionne pas et pour le calcul de la position est correcte.

J'ai modifié pour que l'alerte affiche la division, la position x et la position y.

ce que je remarque c'est que les les divisions sont alignées verticalement alors que ca ne devrait pas être le cas.

Merci d'avance pour votre aide

Toutes mes excuses, j'ai oublié de copier le code que 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
<html>
  <head>
    <script type="text/javascript">
      var count = 1;
      function addDiv() {
        var div = document.createElement("div");
 
        div.setAttribute("id","mydiv"+count);
        div.style.left = (100 + ((count-1)*60))+"px";
        div.style.top = (100 + ((count-1)*60))+"px";
        div.style.width = "80px";
        div.style.height = "80px";
		div.innerHTML="div num"+count;
		document.body.appendChild(div);
 
 
        alert('ajout div : '+div.getAttribute("id")+' : '+div.style.left+' : '+div.style.top);
        count += 1;
      }
    </script>
  </head>
  <body>
    <input name="btn" id="btn" type="button" value="Add" onclick="addDiv()"/>
  </body>
</html>

08/12/2010, 10h55
makao

Bonjour,

Le problème a été résolu en ajoutant div.style.position="absolute"

Merci