divコンテナを動的に作成して既存のdivに追加します

プロパティに「title」というオブジェクトがあります。divコンテナを動的に作成して既存のdivに追加します

ボディが読み込まれると、新しいdiv foreachオブジェクトが作成されます。

これを行うと、divコンテナが作成されず、コンソールにエラーが表示されるようになりました。

重要：明らかに、私のノードリストは空ではありません。私はそれに10個のオブジェクトを持つテストルーチンを持っています。だから私は私のcreateNodeContainer関数で書くとき

console.log(node.title);

それはオブジェクトのタイトルを正しく書き留めます。だから私は、「コンテンツ」を持っていますが、divの「nodelistと」に付加なしの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

＃ - $（ '＃nodeList'）を追加する必要があります。 – 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">'+ node.title +'</div>'; 
    $('#nodeList').append(newNodeContainer); // add it to the parent div 
}

出典

2017-06-18 08:39:43

を試してみてください:)

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:44:58

........それが仕事だ願っています。この

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:46:28

これはDOMとjQueryオブジェクトを混在させることと関係があります。それは私はあなたがjQueryのを使用しているcross site scripting

出典

2017-06-18 08:49:39

いいえ、あなたの答えに間違っている間違ったidセレクターだけで... – Andreas

を許可するかもしれないので、また

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を設定しないように、

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 
}

このコード：ここだけjQueryを使って解決策があります確かに役立つでしょう。

出典

2017-06-18 08:52:59

divコンテナを動的に作成して既存のdivに追加します

答えて

関連する問題