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");
docu开发者_运维知识库ment.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

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

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.

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

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

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

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

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

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