[DOM] Ajouter un div !

Version imprimable

20/08/2007, 22h44
flyxter

[DOM] Ajouter un div !

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.
20/08/2007, 23h35
herve42

un début de soluce

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
21/08/2007, 05h17
B.Moncef

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

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

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

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+

22/08/2007, 12h28
flyxter
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:

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 !

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:

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+