javascript - 我需要在其中创建带有嵌套 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 个 div，但其中没有其他 div 元素，只有第一个 div 中有一些内容..其他 div 刚刚创建，它们甚至不占用网页内的空间

2. 我希望 div 与第一个 div 对齐，即，我需要类似 document.div.appendChild 的东西而不是 document.body.appendChild，而创建的 div 应该附加到第一个 div。 .

请让我知道我怎样才能得到他们的解释..提前谢谢你..

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

空间未被占用，因为它们没有添加任何内容。您可以像使用 document.body 一样向元素添加内容 - 例如，appendChild()。

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..

元素有这样一个方法:

    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() 所做的修改相同。处理 Node 的情况很简单，但是 string 处理不太清楚:

• Array.prototype.slice.call 是必需的，因为 document.querySelectorAll 返回一个 NodeList，它不是数组，并且我不能在上面使用 Array.prototype.forEach()。

另外，相关阅读这里:http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript