Javascript 如何在两个元素之间动态插入元素？

我正在使用一个表，其中有按钮，点击按钮我希望新的TR元素被插入两个TR之间或在TR的末尾。。。 我的密码在这里

<table>
 <tbody>
   <tr>
     <td>
        <input type="submit" value="Add" onclick="addFunction()" />
     </td>
   </tr>
   <tr>
     <td>
        <input type="submit" value="Add" onclick="addFunction()" />
     </td>
   </tr>
   <tr>
     <td>
        <input type="submit" value="Add" onclick="addFunction()" />
     </td>
   </tr>
  </tbody>
 </table>

我想在触发事件的元素旁边插入新的TR元素。。。 注意：我没有使用任何javascript库，只使用普通javascript

<table>
 <tbody>
   <tr>
     <td>
        <input type="submit" value="Add" onclick="addFunction(this)" />
     </td>
   </tr>
   <tr>
     <td>
        <input type="submit" value="Add" onclick="addFunction(this)" />
     </td>
   </tr>
   <tr>
     <td>
        <input type="submit" value="Add" onclick="addFunction(this)" />
     </td>
   </tr>
  </tbody>
 </table>

function addFunction(input)
{
  var newTr = document.createElement("tr");
  var curRow = input.parentNode.parentNode;
  curRow.parentNode.insertBefore(newTr, curRow.nextSibling);
}

函数addFunction（输入） { var newTr=document.createElement（“tr”）； var curRow=input.parentNode.parentNode； curRow.parentNode.insertBefore（newTr，curRow.nextSibling）； }