我需要在其中创建带有嵌套div的div

Question

看看代码

Html代码:

<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代码:

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";

    }
}

我有几个问题,请澄清它们或用代码解释:

1. 创建了10个divc,但是里面没有其他div元素,只有第一个div有一些内容..其他div只是创建了它们甚至占用了网页内的空间

2. 我希望div与第一个div对齐,即.而不是document.body.appendChild我需要像document.div.appendChild这样的东西,而创建的div应该与第一个div一起显示..

请让我知道如何解释他们..谢谢你提前..

Answer 1

创建了10个divc,但是里面没有其他div元素,只有第一个div有一些内容..其他div只是创建了它们甚至占用了网页内的空间

空间未被占用,因为它们没有添加任何内容.您添加的内容就像你做一个元素document.body- appendChild()例如.

我希望div与第一个div对齐,即.而不是document.body.appendChild我需要像document.div.appendChild这样的东西,而创建的div应该与第一个div一起显示..

元素有这样一种方法:

    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>

createNestedDivs()如果要将另一个子项追加到每个创建的元素,该函数将负责处理.您可以传递它Node或string它将按预期处理它们.createNestedDivs()按照与我所做的修改相同的原则工作createdivs().处理a的情况Node很简单,但string操作不太清楚:

• 这Array.prototype.slice.call是必要的,因为document.querySelectorAll返回a NodeList,这不是一个数组,我不能使用Array.prototype.forEach()它.

此外,相关阅读:http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript