JavaScript DOM insertBefore 无法正常工作

Question

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

我正在尝试通过 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*/
}

现在，问题是:

1. insertBefore 在最后一行失败。请注意，insertBefore 也已在 new_tr 对象上尝试过，并且工作正常。因此，唯一可能的无效参数可以是 submitRow，它在失败语句上方一行成功地涂成红色。

2. 如果调用失败，而不是 submitrow，如果使用 formtable.lastChild，它会运行。但是不知何故， lastChild 也包括上排。这意味着，如果我再说 4 行并在测试输入中输入 1、2、3、4、5，然后如果您点击“再添加一个”按钮，现在会在 4 和 5 之间添加一行!

我已经尝试了很多推理，但在这两种情况背后都找不到任何逻辑。

希望得到解决，谢谢大家，

印度阿拜巴维

Answer 1

标题应更改为“JavaScript DOM insertBefore isn't used properly”。

那是因为，即使您没有放入 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>当您需要它们时。