11548 sujets

JavaScript, DOM et API Web HTML5

Coordonnées d'un DIV créer par DOM

Bonjour tout le monde,
je cherche à faire quelque chose et n'y arrive pas, alors je fais appelle à vous dans l'espoir de trouve un peu d'aide.

Dans mon code, j'ai créer via le DOM (document.createElement("div); et document.appendChild(monDiv); ) un div ayant une position absolute avec des propriétés Top et Left en CSS. Tout fonctionne correctement.

J'ai maintenant besoin de créer un second DIV avec la même méthode et qu'il soit dans le premier. Le problème, c'est qu'en utilisant la méthode monDiv.appendChild(MonDeuxiemeDiv); le second div est bien créer, mais il ne fait fait pas partie du premier, tout se passe comme si j'avais simplement fait document.appendChild(MonDeuxiemeDiv); !!!

Je pourrais pas très bien plutot que de créer mon second Div avec DOM, simplement créer une chaine du style "<div id="MonDeuxiemeDiv>contenu</div>" et l'affecter à la propriété innerHTML de MonDiv, mais d'une part ce n'est pas propre, et d'autre part, mon code va avoir besoin d'ajouter plusieurs de ces Div "enfants" ce qui au final va faire un innerHTML énorme !!

si quelqu'un pouvait m'aider, ca serait super sympa !!!

merci par avance

cordialement
NiHaoMa
innerHTML n'est pas standard et je ne suis pas sûr que tu emploies la bonne méthode :
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
 var mondiv = document.createElement("div");
 var mondiv1 = document.createElement("div");
 document.body.appendChild(mondiv);
 mondiv.appendChild(mondiv1);
with(mondiv.style){background="red";width=height=200+"px"}
with(mondiv1.style){background="blue";width=height=100+"px"}

//-->
</script>
</body></html>
justement, je n'utilise pas le innerHTML, je veux créer un nouveau DIV dans le premier avec DOM et non pas en balancant une chaine du style "<div></div>" dans le innerHTML du premier.

voici le code que j"utilise:


  var Conteneur = document.getElementById(oTrl.Contener); // recherche du conteneur
 
  var dDiv = document.createElement("div"); // Création du div 
  var DivCSS = "";
  DivCSS += "position:absolute; border-style:solid; ";
  DivCSS += "height:" + oTrl.Height + "; ";    
  DivCSS += "width:" + oTrl.Width + "; ";          
  DivCSS += "top:" + oTrl.Top + "; ";                     
  DivCSS += "left:" + oTrl.Left + "; ";
  DivCSS += "visibility:" + oTrl.Visible + "; ";
  DivCSS += "background-color:" + oTrl.BackColor + "; ";
  DivCSS += "border-color:" + oTrl.BorderColor + "; ";
  DivCSS += "border-width:" + oTrl.BorderSize + "px; ";
  DivCSS += "overflow:" + oTrl.ScrollBar + "; ";

  dDiv.setAttribute("style",DivCSS);  // Application des CSS pour FireFox
  if (document.all) 
    {dDiv.style.setAttribute("cssText",DivCSS);}// Application des CSS pour IE  
    
    dDiv.innerHTML = "test";
       
  Conteneur.appendChild(dDiv);


sachant que 
Conteneur
est un DIV créer dans une autre fonction comme ca:


oDiv = document.createElement("div");
oDiv.id = "BodyAll"
document.body.appendChild(oDiv);
oTrl.Contener = "BodyAll";
re,


chmel, je viens de voir ton code (désolé, j'avais pas vu avant ma première réponse), je l'ai copier/coller et tester, et effectivement ca fonctionne comme ce que j'aimerais.....mais je ne vois pas de différence avec ce que j'ai fais !!!!

si quelqu'un veux bien m'expliquer....merci
Smiley confused
la différence est que chmel utilise le contenant de sa div créer et non celui du document :
Création de la 1ere div contenante sur le document :
document.body.appendChild(mondiv);
Puis insertion de la deuxieme div DANS celle qui viens d'être crée :
mondiv.appendChild(mondiv1);

et non directement sur le document via document.body

:)
istrion a écrit :
ça a quand même l'ai bien pratique le dom Smiley sweatdrop
ou pourrais je trouver de bon tutoriaux a ce sujet ???


Pour commencer il a selfhtml, mais situ veux aller plus loin, il y a dom gecko

nihaoma, 
oDiv.appendChild(dDiv);
me semble plus simple
Sujet clos
Aller à