html - creating divs and adding text through a javascript function -

i have set of sentences , radio buttons need display on webpage using javascript function. need create divs me visually group these sentences on webpage accordingly. have written function , can display sentences , radio buttons shown below in code below. have specified divs:

var div1 = document.createelement("div"); div1.setattribute("align","left"); div1.style.border = "1px solid #ccc";  var div2 = document.createelement("div"); div2.setattribute("align","left"); div2.style.border = "1px solid #ccc";  var div3 = document.createelement("div"); div3.setattribute("align","left"); div3.style.border = "1px solid #ccc";  var div4 = document.createelement("div"); div4.setattribute("align","left"); div4.style.border = "1px solid #ccc";  var div5 = document.createelement("div"); div5.setattribute("align","left"); div5.style.border = "1px solid #ccc";  var div6 = document.createelement("div"); div6.setattribute("align","left"); div6.style.border = "1px solid #ccc";  var sent1 = "sentence 1 displays here";  var sent2 = "sentence 2 displays here";  var sent3 = "sentence 3 displays here";  div1.appendchild(div2); div1.appendchild(div3); div1.appendchild(div4); div1.appendchild(div5); div1.appendchild(div6);  div2.appendchild(sent1); div2.appendchild(sent2); div3.appendchild(sent3); div4.appendchild(sent2);  return div1; 

what expecting see 6 different boxes (divs) displaying on page, div2 (the second top box on page) having 2 sentences displayed within (sent1 , sent2), div3 , div4 having 1 sentence displaying each, while rest of divs not contain text. unfortunately, not displaying. missing? please me correct syntax/ approach?

if understand correctly problem:

you want add content in 6 different divs , in second 1 add 2 content , in third , fourth 1 content each.

like structure:

• div1
• div2
  • sent1
  • sent2
• div3
  • sent3
• div4
  • sent2
• div5
• div6

if correctly can edit code that:

    var div1 = document.createelement("div");     div1.setattribute("align","left");     div1.style.border = "1px solid #ccc";     // add height show empty boxes     div1.style.height = "30px";      var div2 = document.createelement("div");     div2.setattribute("align","left");     div2.style.border = "1px solid #ccc";      var div3 = document.createelement("div");     div3.setattribute("align","left");     div3.style.border = "1px solid #ccc";      var div4 = document.createelement("div");     div4.setattribute("align","left");     div4.style.border = "1px solid #ccc";      var div5 = document.createelement("div");     div5.setattribute("align","left");     div5.style.border = "1px solid #ccc";     div5.style.height = "30px";      var div6 = document.createelement("div");     div6.setattribute("align","left");     div6.style.border = "1px solid #ccc";     div6.style.height = "30px";      var sent1 = document.createelement("p");     sent1.innerhtml="sentence 1 displays here";      var sent2 = document.createelement("p");     sent2.innerhtml="sentence 2 displays here";      var sent3 = document.createelement("p");     sent3.innerhtml="sentence 3 displays here";      //it not possible append same child different divs duplicate div append multiple times     var sent4 = document.createelement("p");     sent4.innerhtml="sentence 2 displays here";      div2.appendchild(sent1);     div2.appendchild(sent2);     div3.appendchild(sent3);      //appendchild move divs not copied     div4.appendchild(sent4);      document.body.appendchild(div1);     document.body.appendchild(div2);     document.body.appendchild(div3);     document.body.appendchild(div4);     document.body.appendchild(div5);     document.body.appendchild(div6); 

like see in code above, add comments because try use appendchild in wrong way:

• appendchild moves existing dom node place place not copy place;
• to show empty boxes div on page add height div useful visualize div if without content;
• i append child divs (div1 div6) childs body element, can append divs dom element based on need;