Javascript dynamically add elements

Question

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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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, eg

newDiv = document.createElement("div");

Answer 5

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>";

Answer 6

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

Answer 7

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

ie 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>";

Answer 8

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