Question

我正在尝试使用Javascript动态添加表行（我稍后会添加Ajax请求），但是我遇到以下错误：Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

我的代码如下：

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

调用此函数时，我想在<tr>下面添加另一个newJob.innerHTML（内容为<tr>），其ID为row1。

我在this Mozilla page

上找到了代码

Answer 1

示例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是“表格行”。 TR元素只能附加到TABLE，TBODY，THEAD，TFOOT元素中。

在MDN和MSDN中查找 appendChild（）和 insertRow（）方法

Answer 2

使用jQuery实现此目的。它更简单，更少的代码和跨浏览器。这是examples。

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

Answer 3

不要在document.body上调用insertBefore，而是尝试在表上调用它：

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

myTable.insertBefore(newJob, under);

另外，既然你正在创建一个tr元素，不要把tr放在innerHTML中，只要把它放在里面。

Answer 4

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

daps不是有效标记。你不应该传递你想要的标签的id，而是传递元素，例如

newDiv = document.createElement("div");

Answer 5

您当前的代码正在尝试创建“daps”元素（无论是什么）。您需要指定标记名称，而不是Id或其他值。试试这个：

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

Answer 6

**已编辑** 似乎没有黑客就不可能在表格中添加元素（在某种程度上有意义）。因此，您必须使用专用的insertRow和insertCell函数;

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

请注意，在此示例中，新行将在表的顶部处创建，而Foo将之前栏

Answer 7

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8表示父元素（document.body）不包含您要搜索的元素（under）。

即。您的under元素不在body标记的正下方。

尝试做 -

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

当然，innerHTML不应包含标签本身！那样做 -

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

Answer 8

也许是一个错字？它可以在其他浏览器中使用Chrome吗？

NOT_FOUND_ERR代码8 引用的节点不存在;例如，使用insertBefore与子节点不是参考节点的子节点。

见http://observercentral.net/exception8＆amp; http://reference.sitepoint.com/javascript/DOMException

此外，如果您只想向表中添加行，请使用appendChild（）而不是insertBefore（）。

Javascript动态添加元素

8 个答案: