2

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

Improve this question
1
  • np - are you getting any line # for your error? Commented Aug 31, 2011 at 7:53

8 Answers 8

Reset to default
2

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

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

2 Comments

Thank you, your code works. Now is there any way to place that new <tr> beneath the ID (now called var under? I mean, I have multiple table rows and when that function is called, it should be placed beneath table row X.
Ah, using nextSibling works. table.tBodies[0].insertBefore(newJob,under.nextSibling);. So thanks =)
1

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.

Improve this answer

1 Comment

Still Uncaught Error: NOT_FOUND_ERR: DOM Exception 8. :(
1

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');
Improve this answer

4 Comments

That code actually clears my whole table, and will not append it. But thanks I will look into jQuery then.
The error is Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3
Why do you think so? in this code you just create new TR and then append the innerHtml to the <td>Foo</td><td>Bar</td>, and only then you will find the element with id='row1' and append newly created element after the founded element.
Thank you, this code works indeed. Although my question was for Javascript (and since I'm already working in a already build project) they prefer to use Javascript and not a jQuery library. But I upvoted you none the less.
0

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");
Improve this answer

Comments

0

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>";
Improve this answer

1 Comment

Still having the Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 error.
0

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>";
Improve this answer

Comments

0

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().

Improve this answer

Comments

0

** 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

Improve this answer

1 Comment

Still having the Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 error.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.