I need to create divs with nested divs inside it

Question

have a 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 with code:

1. 10 divc's are created but there are no other div elements inside them, only the first div has some content in it.. other divs are just created and they dnt even occupy space inside the webpage

2. I want the div to be aligned to the first div, ie., instead of document.body.appendChild I need something like document.div.appendChild, whereas the created divs should be appeneded with the first div..

Please let me know how can I get them with explanation.. Thank you in advance..

Answer 1

10 divc's are created but there are no other div elements inside them, only the first div has some content in it.. other divs are just created and they dnt even occupy space inside the webpage

Space isn't occupied because they don't have any content added to them. You add content to an element just like you do with document.body - appendChild() for example.

I want the div to be aligned to the first div, ie., instead of document.body.appendChild I need something like document.div.appendChild, whereas the created divs should be appeneded with the first div..

Elements have such a 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's 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 if you want to append another child to each created element. You can pass it a Node or string and it will treat them as expected. createNestedDivs() works by the same principles as the modifications I made to createdivs(). The case for handling a Node is simple enough, but the string handling is a little less clear:

• The Array.prototype.slice.call is necessary because document.querySelectorAll returns a NodeList, which isn't an array, and I can't use Array.prototype.forEach() on it.

Also, related reading here: http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript