html - Structuring div 's created by "createElement" in JavaScript -

structuring div's in html goes this:

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

my code bellow creates 2 divs, places child div next 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 programmer structure div's in html if created through javascript?

don't append childdiv body, instead, append parent element so:

pardiv.appendchild(childdiv); 

using that, should able set same structure in html.