Structuring div 's created by "createElement" in JavaScript

Question

Structuring div's in HTML goes like this:

<div id="parentdiv">
     <div id="childdiv"></div>
</div>

My code bellow creates 2 divs, but places the child div next to the parent div instead of inside it:

var pardiv = document.createElement('pardiv');
pardiv.setAttribute('id', "workspace");
pardiv.innerHTML = "Hello World";
pardiv.style.background = "red";
pardiv.width = 300;
pardiv.height = 300;
document.body.appendChild(pardiv);

var childdiv = document.createElement('childdiv');
    childdiv.setAttribute('id', "childdiv");
    childdiv.innerHTML = "Hello World";
    childdiv.style.background = "yellow";
    childdiv.width = 100;
    childdiv.height = 100;
    document.body.appendChild(childdiv);

How can a programmer structure div's like in HTML if they are created through JavaScript?

Grant Clements · Accepted Answer · 2013-03-18 11:30:57Z

3

Don't append the childDiv to the body, instead, append it to the parent element like so:

pardiv.appendChild(childdiv);

Using that, you should be able to set up the same structure as you would in HTML.

answered Mar 18, 2013 at 11:30

Grant Clements

9846 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Structuring div 's created by "createElement" in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related