I need to create divs with nested divs inside inside

Question

look at the code

HTML code:

<div class="container content-rows" id="contentdisplay"> <div class="col-md-1" id="snocontent">abcd</div> <div class="col-md-3" id="pgnamecontent">abcd</div> <div class="col-md-3" id="cmpcontent">abcd</div> <div class="col-md-2" id="datecontent">abcd</div> <div> <button onclick="createdivs()"><span class="glyphicon glyphicon-king" class="addtrainersbutton" id="addtrainersbutton" title="Add Trainers"></span></button> <button onclick="edit_program()"><span class="glyphicon glyphicon-pencil" id="editprogrambutton" title="Edit Program"></span></button> <span class="glyphicon glyphicon-user" id="assigntrainersbutton" title="Assign Trainers for the Program"></span> <span class="glyphicon glyphicon-remove" id="deleteprogrambutton" title="Delete the Program"></span> </div> 

Javascript Code:

 function createdivs() { var i; for (i = 0;i < 10;i++) { divc = "<div>.container.content-rows"; var list = document.createElement("divc"); document.body.appendChild(list); list.className = "proglist"; } } 

I have a few questions, please clarify them or explain using the code:

/ li>

I want the div to be bound to the first div, i.e. instead of document.body.appendChild I need something like document.div.appendChild, while the created divs should be attached to the first div ..

Please let me know how I can get them with an explanation .. Thanks in advance.

Answer 1

10 divc are created, but inside them there are no other div elements, only the first div has some content in it .. other divs have just been created, and they do not even occupy the space inside the web page

Space is not occupied because they do not have any content added to them. You add content to the element in the same way as to document.body - appendChild() , for example.

I want the div to be aligned with the first div, i.e. instead of document.body.appendChild I need something like document.div.appendChild, while the created divs should be attached to the first div.

Elements have this method:

  function createdivs() { var i; for (i = 0; i < 10; i++) { divc = "<div>.container.content-rows"; var divc = document.createElement("div"); divc.classList.add("container"); divc.classList.add("content-rows"); divc.classList.add("proglist"); divc.textContent = "I'm div #" + i; document.getElementById('contentdisplay').appendChild(divc); createNestedDivs(divc); } } function createNestedDivs(selector) { function appendToNode(node, content) { // ideally content would also be a Node, but for simplicity, // I'm assuming it a string. var inner = document.createElement('span'); inner.textContent = content; node.appendChild(inner); } if (selector instanceof Node) { appendToNode(selector, "inner"); return; } var selected = Array.prototype.slice.call(document.querySelectorAll(selector)); selected.forEach(function(el) { appendToNode(el, "inner"); }); } 

 <div class="container content-rows" id="contentdisplay"> <div class="col-md-1" id="snocontent">abcd</div> <div class="col-md-3" id="pgnamecontent">abcd</div> <div class="col-md-3" id="cmpcontent">abcd</div> <div class="col-md-2" id="datecontent">abcd</div> <div> <button onclick="createdivs()"><span class="glyphicon glyphicon-king" class="addtrainersbutton" id="addtrainersbutton" title="Add Trainers"></span> </button> <button onclick="edit_program()"><span class="glyphicon glyphicon-pencil" id="editprogrambutton" title="Edit Program"></span> </button> <span class="glyphicon glyphicon-user" id="assigntrainersbutton" title="Assign Trainers for the Program"></span> <span class="glyphicon glyphicon-remove" id="deleteprogrambutton" title="Delete the Program"></span> </div> 

The createNestedDivs() function takes care of whether you want to add another child to each created element. You can pass it to Node or string , and it will process them as expected. createNestedDivs() works on the same principles as the modifications I made for createdivs() . The case for handling Node is simple enough, but processing string little less clear:

• Array.prototype.slice.call needed because document.querySelectorAll returns a NodeList , which is not an array, and I cannot use Array.prototype.forEach() on it.

In addition, it says the following: http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript