動態創建div容器並將它們添加到現有的div

我收到了一些其中包含屬性「title」的對象。動態創建div容器並將它們添加到現有的div

當正文加載時，我想創建一個新的div foreach對象存在。

當我這樣做時，div容器不會被創建，現在在控制檯中列出了錯誤。

重要提示：顯然，我的節點列表不是空的。我有一個測試例程，裏面有10個對象。所以，當我在createNodeContainer功能

console.log(node.title);

寫寫下對象的標題正確。所以，我有「內容」，但也有加入到div「節點列表」

所以我當前的代碼看起來這不派息容器：

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>

有人可以幫我嗎？

來源

2017-06-18 Question3r

您需要添加＃ - $（ '＃節點列表'） – Gerard

這是'.className'而不是'.class'。爲什麼混合使用jQuery和vanilla JS？ [選擇器錯誤]（https://api.jquery.com/category/selectors/）。 – Andreas

哦，該死的缺失＃... – Question3r

試試這個

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

來源

2017-06-18 08:39:43

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

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

來源

2017-06-18 08:44:58

我讓代碼來說話:)

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>

來源

2017-06-18 08:46:28

這與混合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

來源

2017-06-18 08:49:39

否，只有錯誤的ID選擇這仍然是錯在你的答案... – Andreas

我你使用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 
}

此代碼肯定會有幫助。

來源

2017-06-18 08:52:59

動態創建div容器並將它們添加到現有的div

回答

相關問題