[DOM] Ajouter un div !

**flyxter** · 20/08/2007, 22h44

Bonjour,

J'aimerais à l'aide de javascript pouvoir ajouter un div quand je clique sur un lien, et quand je reclique dessus, supprimer le div.
Je pense utiliser "onClick" mais ensuite je ne vois pas comment faire pr ajouter et supprimer des blocs.

Merci de votre aide.

**herve42** · 20/08/2007, 23h35

bonsoir

eh bien moi, je ferais comme cela

sur le onclick j'appelerais une fonction javascript qui
- genererai le div aves ses fils selon le modele dom (createelement etc) si le div n'existe pas déjà
- si il existe je supprimerai le div aves tous ses fils.

cdt

**B.Moncef** · 21/08/2007, 05h17

Tu peux mettre le div sur ta page avec une propriété css "display: none;", et sur le onclick tu vérifies :

- Si le div est cache, tu mets display: block;
- Sinon tu le caches (display: none

**ranell** · 21/08/2007, 15h39

bonjour ,
j'espere que ce code va t'aider (c'est un exemple):
entre les balises <head>:

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
 
<head>
<style type="text/css">
.bouton{LEFT: 680px; POSITION: absolute; TOP: 500px};
</style>
 
<script language="JavaScript">
var  etat=false;
function choix()
{if (!etat)
  {nouveauDiv = document.createElement("div");
  //crée un nouvel élément div
  im="ton texte";
  nouveauDiv.innerHTML = im;
  // et lui donne un peu de contenu
  nouveauDiv.setAttribute("id","div_id");
  mon_div = document.getElementById("org_div1");
  document.body.insertBefore(nouveauDiv,mon_div);
  //ajoute l'élément créée et son contenu au DOM
  etat=true;}
else 
{document.getElementById("div_id").parentNode.removeChild(document.getElementById("div_id"));
etat=false;}}
 
</script>
</head>

entre les balises <body>:

Code :

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

1
2
3
4
5
 
<body>
<div id="org_div1" ></div>
<input type="button" class="bouton" value="creer/supp" onClick="javascript:choix();"/>
</body>

la premiere condition "if" cree une zone div dynamiquement, tandis que le "else" la détruit .
a+

**flyxter** · 22/08/2007, 12h28

Merci beaucoup pour vos réponses.
Ranell, ton code marche pratiquement comme je le veux, je l'ai en plus compris, donc c'est impecable.

Par contre, j'ai tout de même rencontré un problème.
Lorsque

Code :

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

1
2
<div id="org_div1" ></div>
<input type="button" class="bouton" value="creer/supp" onClick="javascript:choix();"/>

se situe entre deux DIV, le code ne marche pas !

**ranell** · 22/08/2007, 14h59

bonjour,
tu veux dire que tu veux mettre le tt dans une zone div??
sinon tu peux tjrs essayé de faire plus simple, mais cette fois pas avec le DOM.
je te propose ca:

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
<style type="text/css">
.bouton{LEFT: 680px; POSITION: absolute; TOP: 500px};
</style>
<script language="JavaScript">
var  etat=true;
function choix()
{if (!etat)
  {document.getElementById("div_id").style.visibility="visible";
  etat=true;}
else 
  {document.getElementById("div_id").style.visibility="hidden";
  etat=false;}
}
</script>
</head>
<body>
<div id="div_id" >visible</div>
<input type="button" class="bouton" value="montrer/cacher" onClick="javascript:choix();"/>
</body>

ici la div est créée mais on la supprime pas, on la montre et on la cache.
rq: j'ai ajouté des commentaires au code de mon dernier post.

a+

[DOM] Ajouter un div !

JavaScript

Discussions similaires

Partager

Partager