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对象上尝试过了，并且它工作正常。所以唯一的possibe无效的参数可以是submitRow，在失败的语句上方只有一行成功地涂成红色。

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

我已经尝试了很多来推理它，但可能没有任何逻辑背后的情况。

在解决方案的希望，感谢你的一切，

阿沛巴维，印度

Answer 1

标题应该改为“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); 

IE浏览器，浏览器， Safari和Opera支持它，Firefox不会，但它可以很容易地被删除。我不推荐使用这个东西，anywa年。）

而且，作为一个一般性的建议，总是写下表时使用<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>的，当你需要他们。