CODEWITHSUNDEEP
javascriptjqueryhtml
trinathon
trinathon

Reputation: 99

How can you insert a div into another created in javascript

So I'm trying to insert one div into another both created with Javascript I have the following code,

// Assign tool attributes to Javascript Variables
    var tool_name = String(tool['tool_name']);
    tool_name = tool_name.replace(/'/g, '');
    var tool_inventory_number = String(tool['tool_inventory_number']);
    tool_inventory_number = tool_inventory_number.replace(/'/g, '');
    var tool_recnum = String(tool['tool_recnum']);
    tool_recnum = tool_recnum.replace(/'/g, '');

// Create the divs for the search results
    var toolDiv = document.createElement("div");
    var toolDivPicture = document.createElement("div");
    //todo: Insert picture into this toolDivPicture div
    var toolDivDescription = document.createElement("div");
    toolDivDescription = toolDivDescription.innerHTML + "<h2>" + tool_name + "</h3>" + "    <br>" + "Inventory Number: " + tool_inventory_number;

// Assign class to search result toolDiv and add content to it.
    toolDiv.className = "toolDiv";
    toolDiv.appendChild(toolDivDescription);

I keep getting the following error,

Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null.

Could this be because I have to refrence the child div by id? I really just want to have javascript create a div that contains two other divs and then insert it into the page. Any help/suggestions are appreciated!

Upvotes: 2

Views: 630

Answers (2)

Laoujin
Laoujin

Reputation: 10229

Since you marked the question with the jQuery tag, I assume that you have the jQuery library loaded:

// Create the divs for the search results
var toolDiv = $("<div/>");
var toolDivPicture = $("<div/>");
var toolDivDescription = $("<div/>");
toolDivDescription.html("<h2>" + tool_name + "</h3>" + "    <br>" + "Inventory Number: " + tool_inventory_number);

// Assign class to search result toolDiv and add content to it.
toolDiv.addClass("toolDiv");
toolDiv.append(toolDivDescription);

Note that you start a h2 but end a h3.

jsFiddle

Upvotes: 1

pj013
pj013

Reputation: 1419

Try this:

Wrap up your JavaScript in an onload function. So first add:

<body onload="loadJS()">

Then put your javascript in the load function, so:

function loadJS() {
    // Assign tool attributes to Javascript Variables
    var tool_name = String(tool['tool_name']);
    tool_name = tool_name.replace(/'/g, '');
    var tool_inventory_number = String(tool['tool_inventory_number']);
    tool_inventory_number = tool_inventory_number.replace(/'/g, '');
    var tool_recnum = String(tool['tool_recnum']);
    tool_recnum = tool_recnum.replace(/'/g, '');

// Create the divs for the search results
    var toolDiv = document.createElement("div");
    var toolDivPicture = document.createElement("div");
    //todo: Insert picture into this toolDivPicture div
    var toolDivDescription = document.createElement("div");
    toolDivDescription = toolDivDescription.innerHTML + "<h2>" + tool_name + "</h3>" + "    <br>" + "Inventory Number: " + tool_inventory_number;

// Assign class to search result toolDiv and add content to it.
    toolDiv.className = "toolDiv";
    toolDiv.appendChild(toolDivDescription);
}

Upvotes: 0

Related Questions