Ajout dynamique de divisions au document (DOM)

**makao** · 07/12/2010, 17h21

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 :

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

**andry.aime** · 07/12/2010, 17h40

Bonsoir,

Ton code fonctionne mais il n'y a rien dans ton div

et un div n'a pas d'attribut name

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

**makao** · 07/12/2010, 19h55

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

**makao** · 07/12/2010, 19h56

Toutes mes excuses, j'ai oublié de copier le code que 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
<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>

**makao** · 08/12/2010, 11h55

Bonjour,

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

Merci

Ajout dynamique de divisions au document (DOM)

JavaScript

Vue hybride

Discussions similaires

Partager

Partager