How can you insert a div into another created in javascript

Question

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!

Laoujin · Accepted Answer · 2014-04-03 16:08:26Z

1

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

edited Apr 3, 2014 at 16:08

answered Apr 3, 2014 at 15:45

Laoujin

10.3k7 gold badges45 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

trinathon Over a year ago

Putting in your code generated the following error, Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.

Laoujin Over a year ago

Ack, that's what happens when one doesn't test code. All fixed now!

pj013 · Accepted Answer · 2014-04-03 15:45:50Z

0

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

answered Apr 3, 2014 at 15:45

pj013

1,4291 gold badge12 silver badges31 bronze badges

1 Comment

trinathon Over a year ago

It's already wrapped in a function that is called every time a form element is updated.

Collectives™ on Stack Overflow

How can you insert a div into another created in javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related