动态创建 div 容器并将它们添加到现有 div答案

【问题标题】：Create div containers dynamically and add them to a existing div动态创建 div 容器并将它们添加到现有 div
【发布时间】：2017-06-18 08:31:32
【问题描述】：

我得到了一些带有“title”属性的对象。

当身体被加载时，我想为现有的每个对象创建一个新的 div。

当我这样做时，不会创建 div 容器，现在控制台中列出了错误。

重要提示：显然，我的节点列表不为空。我有一个包含 10 个对象的测试例程。所以当我写我的createNodeContainer函数时

console.log(node.title);

它正确地写下对象的标题。所以我有“内容”，但没有 div 容器添加到 div“nodeList”

所以我当前的代码如下所示：

function loadNodes(){
      var nodes = store.getNodes(); // get all the objects from a list

      for (var i = 0; i < nodes.length; i++) {
        createNodeContainer(nodes[i]); // pass in the current node of the nodeList
      }
    }

    function createNodeContainer(node){ // create the new div
      var newNodeContainer = document.createElement("div");
      newNodeContainer.class = "nodeContainer"; // add some css
      newNodeContainer.innerHTML = node.title; // write a text for testing it
      $('nodeList').append(newNodeContainer); // add it to the parent div
    }

我的 HTML 是这样的：

 <body onLoad ="loadNodes()">

    <div id="nodeList">
    </div>

    </body>

有人可以帮我吗？

【问题讨论】：

你需要添加一个# - $('#nodeList')
这是.className 而不是.class。为什么要混合使用 jQuery 和 vanilla JS？ selector is wrong.
哦该死的失踪# ...

标签： javascript jquery html

【解决方案1】：

我使用的是 jQuery，

var createNodeContainer = function(node){
    var newContainer = '<div class="nodeContainer">'; //Create a div with nodeContainer class
    newContainer += node.title; //Add title within div
    newContainer += '</div>'; //Close your div

    console.log(newContainer); //Check the created div container

    $('#nodeList').append(newContainer); //Append created containerto the parent div
}

这段代码肯定会有所帮助。

【讨论】：

【解决方案2】：

试试这个

function createNodeContainer(node){ // create the new div
      var newNodeContainer = "<div class='nodeContainer'>";
      var divContent = "text for created div...";
      var divClose = "</div>";
      $('#nodeList').append(newNodeContainer+divContent+divClose);
}

【讨论】：

【解决方案3】：

我希望它的工作............

function createNodeContainer(node){ // create the new div
  var newNodeContainer = '<div class="nodeContainer">'+ node.title +'</div>';
  $('#nodeList').append(newNodeContainer); // add it to the parent div
}

【讨论】：

【解决方案4】：

我会让代码来说话:)

var loadNodes = function() {
  var nodes = [
    {title: 'one'},
    {title: 'two'}
  ];
  
  for (var i = 0; i < nodes.length; i++) {
    createNewNodeItem(nodes[i]);
  }
}

// Pure JavaScript Solution
var createNewNodeItem = function(node) {
  var nodeList = document.getElementById('nodeList');
  
  var divOpen = '<div class="nodeContainer">';
  var divClose = '</div>';
  
  nodeList.innerHTML = nodeList.innerHTML + divOpen + node.title + divClose;
}

// jQuery Solution
var createNewNodeItem_jQuery = function(node) {
  var divOpen = '<div class="nodeContainer">';
  var divClose = '</div>';
  
  $('#nodeList').append(divOpen + node.title + divClose);
}

<body onload="loadNodes()">
<div id="nodeList">

</div>
</body>

【讨论】：

【解决方案5】：

这与混合 DOM 和 jQuery 对象有关。这是一个只有 jQuery 的解决方案：

function createNodeContainer(node){
    var newNodeContainer = $('<div></div>'); // Create the div
    newNodeContainer.addClass('nodeContainer'); // Set the class
    newNodeContainer.text(node.title); // Set the text
    $('#nodeList').append(newNodeContainer); // Add the div to the parent
}

另外，避免直接设置 div 的 HTML，因为它可能允许 cross site scripting

【讨论】：

不，只有错误的 id 选择器在你的答案中仍然是错误的......

【解决方案6】：

您错过了 id 选择器前面的 '#' 符号：

$('nodeList').append(newNodeContainer);

以上行替换为：-

$('#nodeList').append(newNodeContainer);

我希望这是唯一的错误并且很容易解决。

【讨论】：