Question

我得到了一些带有属性的对象＆＃34; title＆＃34;在它。

当主体加载时，我想创建一个新的div foreach对象。

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

重要说明：显然，我的节点列表不为空。我有一个测试程序，里面有10个物体。所以当我在我的createNodeContainer函数中写作

时

console.log(node.title);

它正确地记下了对象的标题。所以我有＆＃34;内容＆＃34;但没有div容器添加到div＆＃34; nodeList＆＃34;

所以我现在的代码看起来像这样：

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>

有人可以帮助我吗？

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

此代码肯定会有所帮助。

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

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

Answer 4

我让代码进行交谈：）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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

Answer 6

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

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

以上行将其替换为：-

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

我希望这是唯一的错误和简单的解决方法。

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

6 个答案: