javascript - JavaScript DOM insertBefore无法正常工作

这是我的第一个问题，请原谅我的错误。

我正在尝试通过JavaScript将行添加到表中。新添加的行将添加到倒数第二个位置，最后一行包含用于创建新行的按钮。最后一行的ID为“submitrow”，但是获取该元素并将其传递给insertBefore却无法正常工作。将lastChild作为第二个参数传递给insertBefore也表现为奇怪。

在体内，形式如下:

<form>
    <input type="hidden" name="submit_done" value="true" />
    <table id="formtable">
        <tr>
            <td>Number : </td>
            <td><input type="text" name="num[]" /></td>
        </tr>
        <tr id="submitrow">
            <td><input type="button" value="Add one more" onclick="addRow()" /></td>
            <td><input type="submit" value="Go!" /></td>
        </tr>
    </table>
</form>

这是JavaScript函数:

function addRow(){
    var new_tr  = document.createElement('tr');
    var new_td1     = document.createElement('td');
    var new_td2     = document.createElement('td');
    var new_input   = document.createElement('input');

    new_td1.innerHTML = 'Number : ';

    new_input.type = 'text';
    new_input.name = 'num[]';
    new_td2.appendChild(new_input);

    new_tr.appendChild(new_td2);
    new_tr.insertBefore(new_td1, new_td2);

    var formtable   = document.getElementById('formtable');
    var submitrow   = document.getElementById('submitrow');
    submitrow.style.backgroundColor='red'; /*Works fine, paints button row red*/
    formtable.insertBefore(new_tr, submitrow); /*fails, invalid argument*/
}

现在，问题是:

insertBefore在最后一行失败。请注意，已经在new_tr对象上尝试了insertBefore作为wel，并且工作正常。因此，唯一可能的无效参数可以是SubmitRow，仅在失败的语句上方一行将shich成功涂成红色。

如果失败，则使用submitrow代替formtable.lastChild进行运行。但是然后lastChild也以某种方式包括上一行。这意味着，如果我再说4行，然后在测试输入中输入1、2、3、4、5，然后单击“再添加一个”按钮，则现在在4到5之间添加了一行!

我已经尝试了很多原因，但是在任何一种情况下都无法理解。

希望有一个解决方案，谢谢大家，

印度Abhay Bhave

最佳答案

标题应在“JavaScript DOM insertBefore使用不正确”中更改。

这是因为，即使您没有放入DOM，浏览器也会自动创建一个<tbody>元素来包装表中的行。因此，碰巧#formtable是而不是#submitrow的父级，这就是为什么会出现错误。

试试这个:

formtable.tBodies[0].insertBefore(new_tr, submitrow);

或者，更一般而言:

submitrow.parentNode.insertBefore(new_tr, submitrow);

(在支持该功能的浏览器中，甚至有一个:

submitrow.insertAdjacentElement("beforeBegin", new_tr);

Internet Explorer，Chrome，Safari和Opera支持它，而Firefox不支持，但可以很容易地进行填充。无论如何，我不建议使用这些东西。)

并且，作为一般建议，在写下表时始终使用<tbody>标记:

<table id="formtable">
    <tbody>
        <tr>
            <td>Number : </td>
            <td><input type="text" name="num[]" /></td>
        </tr>
        <tr id="submitrow">
            <td><input type="button" value="Add one more" onclick="addRow()" /></td>
            <td><input type="submit" value="Go!" /></td>
        </tr>
    </tbody>
</table>

并且，当然，在需要时也可以使用<thead>和<tfoot>。