javascript - getElementByID を使用してテーブル行をテーブルに追加しますか?

Question

テーブルに追加の行を追加できるようにしたいと考えています。現在のコードでは、挿入する場所に関係なく、テーブルの外側に 2 つの入力ボックスを追加するだけです。ブラウザで調べると、テーブル タグが削除されているように見えますが、getElementByID 関数の使用に何か問題がありますか?

テーブルに追加する私の非表示の行:

<div id="rowToBeAdded" style="display: none">
  <tr>
    <td><input type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /></td>
    <td><input style="margin-right:2em;" type="text" value="" name="newLinkTitle[]" size="50" /></td>
    <td><input type="text" value="http://" name="newLinkAddress[]" size="50" /></td>
  </tr>
</div>

</tr>私のテーブルの最後の後、私は持っています：

<span id="addRowHere">  
  <input type="button" id="moreFields" value="Add more links" onclick="init()" />
</span>

そして、ここに私のJavascriptがあります:

function init() {
  document.getElementById('moreFields').onclick = moreFields;
  moreFields();
}

function moreFields() {
  var newFields = document.getElementById('rowToBeAdded').cloneNode(true);
  newFields.style.display = 'block';

  var newField = newFields.childNodes;
  var insertHere = document.getElementById('addRowHere');
  insertHere.parentNode.insertBefore(newFields,insertHere);

}