javascript - Create div containers dynamically and add them to a existing div

I got some objects with a property "title" in it.

When the body gets loaded, I want to create a new div foreach object existing.

When I do this, the div containers don't get created and there is now error listed up in the console.

Important: Obviously, my node list is not empty. I got a test routine with 10 objects in it. So when I write in my createNodeContainer function

console.log(node.title);

it writes down the title of the object correctly. So I have the "content" but there are no div containers added to the div "nodeList"

So my current code looks this:

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
    }

and my Html is this:

 <body onLoad ="loadNodes()">

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

    </body>

Can someone help me out here?

I got some objects with a property "title" in it.

When the body gets loaded, I want to create a new div foreach object existing.

When I do this, the div containers don't get created and there is now error listed up in the console.

Important: Obviously, my node list is not empty. I got a test routine with 10 objects in it. So when I write in my createNodeContainer function

console.log(node.title);

it writes down the title of the object correctly. So I have the "content" but there are no div containers added to the div "nodeList"

So my current code looks this:

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
    }

and my Html is this:

 <body onLoad ="loadNodes()">

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

    </body>

Can someone help me out here?

Share Improve this question edited Jun 18, 2017 at 8:38 Gerard 15.8k5 gold badges33 silver badges53 bronze badges asked Jun 18, 2017 at 8:31 Question3r 3,87229 gold badges123 silver badges244 bronze badges

You need to add a # - $('#nodeList') – Gerard Commented Jun 18, 2017 at 8:39
It's .className and not .class. Why the mix of jQuery and vanilla JS? The selector is wrong. – Andreas Commented Jun 18, 2017 at 8:39
Oh damn the missing # ... – Question3r Commented Jun 18, 2017 at 9:31

Add a ment |

6 Answers 6

Sorted by: Reset to default 3

I you are using 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
}

This code will surely helpful.

Try this

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

I hope it's work........

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

I'll let the code do the talking :)

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>

This has to do with mixing DOM and jQuery objects. Here is a solution with only 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
}

Also, avoid setting the HTML of the div directly, since it might allow cross site scripting

You have missed a '#' symbol in front of the id selector:

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

Above line replace this with:-

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

I hope it is the only mistake and an easy fix.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Create div containers dynamically and add them to a existing div - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)