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

    }
}

我有几个问题，请澄清或用代码解释：

创建了10个divc，但是里面没有其他div元素，只有第一个div有一些内容..其他div只是创建了它们甚至占用了网页内的空间< / p>
我希望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加上..

元素有这样一种方法：

＆＃13;

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

＆＃13;

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

＆＃13;

如果要将另一个子项追加到每个创建的元素，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

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

1 个答案: