title: How to insert an element between the two elements dynamically?
body: <p>I am using a table, in which there are buttons, on button click i want the new TR element to be inserted between the two TR or at the end of the TR...
  my code goes here </p>
  
  <pre><code>&lt;table&gt;
   &lt;tbody&gt;
     &lt;tr&gt;
       &lt;td&gt;
          &lt;input type="submit" value="Add" onclick="addFunction()" /&gt;
       &lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;
          &lt;input type="submit" value="Add" onclick="addFunction()" /&gt;
       &lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt;
       &lt;td&gt;
          &lt;input type="submit" value="Add" onclick="addFunction()" /&gt;
       &lt;/td&gt;
     &lt;/tr&gt;
    &lt;/tbody&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>i want to insert new TR element next to the element which has triggered the event...
  NOTE: i am not using any javascript library, just plain javascript</p>