Javascript動態添加元素

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

調用此函數時，我想在ID為row1的<tr>下添加另一個<tr> （具有newJob.innerHTML的內容）。

我在此Mozilla頁面上找到了代碼

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>

樣本腳本：

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。 它更簡單，代碼更少，瀏覽器更簡單。 這是例子 。

$('<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

您當前的代碼正在嘗試創建一個“小睡”元素（無論是什么）。 您需要指定標簽名稱，而不是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將在 Bar 之前。

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所引用的節點不存在；必須為0。 例如，將insertBefore與不是參考節點的子節點的子節點一起使用。

參見http://observercentral.net/exception8和http://reference.sitepoint.com/javascript/DOMException

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