CODEWITHSUNDEEP
javascripthtml
Devator
Devator

Reputation: 3904

Javascript dynamically add elements

I'm trying to dynamically add table rows using Javascript (I will add Ajax requests later on), but I'm having the following error: Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

My code is as follows:

function SplitsJob() {

var newJob = document.createElement("tr");
newJob.innerHTML = "<tr><td>Foo</td><td>Bar</td></tr>";

var under = document.getElementById("row1");
document.body.insertBefore(newJob, under);
}

When this function is called, I want to add another <tr> (with the contents of newJob.innerHTML) beneath the <tr> with the id row1.

I have found the code on this Mozilla page

Upvotes: 2

Views: 7768

Answers (8)

Andrew D.
Andrew D.

Reputation: 8210

sample HTML:

<table id="mytable">
    <tbody>
        <tr id="row1"><td>xxx</td><td>Bar</td></tr>
    </tbody>
</table>
<a href="#" onclick="javascript:InsertBefore();return false;">Insert Before</a><br/>
<a href="#" onclick="javascript:AppendChild();return false;">Append Child</a><br/>
<a href="#" onclick="javascript:InsertRow();return false;">InsertRow</a>

samle SCRIPT:

var i=0;
function randColor() {
    var str=Math.round(16777215*Math.random()).toString(16);
    return "#000000".substr(0,7-str.length)+str;
}

function InsertBefore() {
    var table = document.getElementById("mytable");
    var under = document.getElementById("row1");
    var newJob = document.createElement("tr");
    newJob.style.backgroundColor=randColor();
    //newJob.innerHTML = "<tr><td>Foo</td><td>Bar</td></tr>"; // its inserted inside TR. no additional TR's needed.
    newJob.innerHTML = "<td>Foo "+(i++)+".</td><td>Bar</td>";
    table.tBodies[0].insertBefore(newJob,under);
}

function AppendChild() {
    var table = document.getElementById("mytable");
    var newJob = document.createElement("tr");
    newJob.style.backgroundColor=randColor();
    newJob.innerHTML = "<td>Foo "+(i++)+".</td><td>Bar</td>";
    table.tBodies[0].appendChild(newJob);
}


function InsertRow() {
    var indexToInsert=1;
    var table = document.getElementById("mytable");
    var newJob = table.tBodies[0].insertRow(indexToInsert);
    newJob.style.backgroundColor=randColor();
    newJob.innerHTML = "<td>Foo "+(i++)+".</td><td>Bar</td>";
}

TR is a "table row". TR-elements can be appended only into TABLE, TBODY, THEAD, TFOOT elements.

Find for appendChild() and insertRow() methods in MDN and MSDN

Upvotes: 2

friendzis
friendzis

Reputation: 809

** Edited ** It seems that without hacking it is impossible to add elements to table (makes sense in a way). Therefore you have to use dedicated insertRow and insertCell functions;

function SplitsJob() {
    var table = document.getElementById("table1");
    var newRow = table.insertRow(0);

    var newCell = newRow.insertCell(0);
    newCell.innerHTML = "Bar";

    newCell = newRow.insertCell(0);
    newCell.innerHTML = "Foo";
}

Note that in this example new row will be created at the top of table and Foo will be before Bar

Upvotes: 0

qrazi
qrazi

Reputation: 1391

Perhaps a typo? Does it work in other browser then Chrome?

NOT_FOUND_ERR code 8 The referenced node does not exist; for example using insertBefore with a child node that is not a child of the reference node.

See http://observercentral.net/exception8 & http://reference.sitepoint.com/javascript/DOMException

Also, if you just want to add rows to the table, use appendChild() instead of insertBefore().

Upvotes: 0

Samich
Samich

Reputation: 30095

Use jQuery for this porposes. It's mutch simplier, less code and cross-browser. Here is examples.

$('<tr>').html('<td>Foo2</td><td>Bar</td>').insertAfter('#row1');

Upvotes: 1

kinakuta
kinakuta

Reputation: 9037

Rather than calling insertBefore on the document.body, try calling it on the table:

var myTable = document.getElementsByTagName("table")[0]; // this is assuming you have just one table

myTable.insertBefore(newJob, under);

Also, since you're creating a tr element, don't put the tr in the innerHTML, just put what will go inside it.

Upvotes: 1

user348716
user348716

Reputation:

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 means that the parent element (document.body) does not contain the element you are searching for (under).

i.e. your under element is not directly under the body tag.

Try doing -

document.body.insertBefore(newJob, newJob.parent);

And of course, innerHTML should not contain the tag itself! So do - 

newJob.innerHTML = "<td>Foo</td><td>Bar</td>";

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150010

Your current code is trying to create a "daps" element (whatever that is). You need to specify the tag name, not an Id or other value. Try this:

var newJob = document.createElement("tr");
newJob.innerHTML = "<td>Foo</td><td>Bar</td>";

Upvotes: 0

Visionary Software Solutions
Visionary Software Solutions

Reputation: 3848

var newJob = document.createElement("daps");

daps is not a valid tag. You're not supposed to pass in the id for the tag you want, but the element, e.g.

newDiv = document.createElement("div");

Upvotes: 0

Related Questions