Create div containers dynamically and add them to a existing div

Question

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?

It's `.className` and not `.class`. Why the mix of jQuery and vanilla JS? The [selector is wrong](https://api.jquery.com/category/selectors/). — Andreas, Jun 18 '17 at 08:39

score 3 · Answer 1 · answered Jun 18 '17 at 08:52

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.

score 2 · Accepted Answer · answered Jun 18 '17 at 08:39

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

score 2 · Answer 3 · answered Jun 18 '17 at 08:44

2

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
}

answered Jun 18 '17 at 08:44

Neeraj Pathak

759
4
13

score 2 · Answer 4 · answered Jun 18 '17 at 08:46

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>

Endenite · Answer 5 · 2017-06-18T10:06:44.063

2

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

edited Jun 18 '17 at 10:06

answered Jun 18 '17 at 08:49

Endenite

382
6
13

No, only with the wrong id selector which is still wrong in your answer... – Andreas Jun 18 '17 at 10:00

score 0 · Answer 6 · edited Nov 26 '18 at 07:24

0

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.

edited Nov 26 '18 at 07:24

Prashant Pimpale

10,349
9
44
84

answered Oct 29 '18 at 07:24

agr

127
1
12

Create div containers dynamically and add them to a existing div

6 Answers6