CODEWITHSUNDEEP
javascriptjqueryhtml
Question3r
Question3r

Reputation: 3772

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?

Upvotes: 0

Views: 4677

Answers (6)

agr
agr

Reputation: 127

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.

Upvotes: 0

Endenite
Endenite

Reputation: 390

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

Upvotes: 2

Binary Brackets
Binary Brackets

Reputation: 504

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.

Upvotes: 3

Amruth Pillai
Amruth Pillai

Reputation: 1693

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>

Upvotes: 2

Neeraj Pathak
Neeraj Pathak

Reputation: 759

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
}

Upvotes: 2

Gulmuhammad Akbari
Gulmuhammad Akbari

Reputation: 2036

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

Upvotes: 2

Related Questions