Nested DIVs

[L0rdCha0s]

Hey everyone!

I'm having a major problem trying to dynamically create DIVs and nest them.

Here's the code I have so far..

function addElement(newcolor)
{
var ni = document.getElementById('div1');
var newcontainer = document.createElement('div');
var divIdName1 = 'ContainerForGrouphead';

newcontainer.setAttribute('id', divIdName1);
ni.appendChild(newcontainer);
newcontainer.style.position = "relative";
newcontainer.style.pixelTop = "10%";
newcontainer.style.pixelLeft = "10%";
newcontainer.style.width = "200";
newcontainer.style.height = "250";
newcontainer.style.border = "1px solid black";
newcontainer.style.styleFloat = "left";
newcontainer.style.clear = "left";

var ni = document.getElementById('ContainerForGrouphead');
var newdiv = document.createElement('div');
var divIdName = 'group';
newdiv.setAttribute('id',divIdName);
ni.appendChild(newdiv);
newdiv.style.position = "absolute";
newdiv.style.pixelTop = "10%";
newdiv.style.pixelLeft = "200%";
newdiv.style.border = "2px solid black";
newdiv.style.width = 50;
newdiv.style.height = 50;
newdiv.style.backgroundColor = newcolor;
newdiv.innerHTML = "hi";
addGroup(1);
}

function addGroup(number)
{
var ni = document.getElementById('ContainerForGrouphead');
var newcontainer = document.createElement('div');
var divIdName1 = 'ContainerForGroup';

newcontainer.setAttribute('id', divIdName1);
ni.appendChild(newcontainer);
newcontainer.style.position = "relative";
newcontainer.style.pixelTop = "40%";
newcontainer.style.pixelLeft = "50%";
newcontainer.style.width = "200";
newcontainer.style.height = "200";
newcontainer.style.border = "2px solid black";
newcontainer.style.styleFloat = "left";
newcontainer.style.clear = "left";

var newdiv = document.createElement('div');
divIdName = 'Group';
newdiv.setAttribute('id', divIdName);
newcontainer.appendChild(newdiv);
newdiv.style.position = "absolute";
newdiv.style.pixelTop = "15%";
newdiv.style.pixelLeft = "15%";
newdiv.style.width = "25%";
newdiv.style.height = "25%";
newdiv.style.styleFloat = "left";
newdiv.style.border = "2px solid black";
newdiv.innerHTML = "Hello";
}

I'm calling the addElement() function on the body onload="".

Basically, it's putting all the divs inside one another. Maybe i'm not understanding the way you use Javascript to create and NEST DIVs? I want the "top" and "left" style attributes to separate the divs..but it's not working!

My overall goal is to create an Org chart...using nothing but DIVs and CSS (and javascript, obviously...since I can't figure out any other way to dynamically create the DIVs)..

Any help would be greatly appreciated!

 

[BillyRayPreachersSon]

Basically, it's putting all the divs inside one another

"It" is putting the DIVs inside each other because that's what you're telling "it" to do on the second DIV:

var ni = document.getElementById('ContainerForGrouphead');  [!]// This is the div you've just created[/!]
...
ni.appendChild(newcontainer);  [!]// And now you're appending the second DIV inside it[/!]

If you don't want one inside the other, but rather as sibling elements, you should append the second DIV to the same element as the first.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

L0rdCha0s,

Did that work for you?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

L0rdCha0s,

Did the advice above work for you? Did you resolve your problem?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[L0rdCha0s]

It sure did BillyRay Thanks!!!

Sorry I haven't responded sooner, i've been out of town on business and extremely busy!

Again, I appreciate the replies!