title: jQuery: add row to table and the select it in DOM
body: <p>I want to add a row to a table, and then use it as a DOM object. Suppose the following HTML:</p>
  
  <pre><code>&lt;table&gt;
    &lt;tr class="existing-row"&gt;&lt;td&gt;
        &lt;a&gt;add new row&lt;/a&gt;
    &lt;/td&gt;&lt;/tr&gt;
    &lt;tr class="existing-row"&gt;&lt;td&gt;
        &lt;a&gt;add new row&lt;/a&gt;
    &lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I use the following JavaScript with jQuery to insert a row:</p>
  
  <pre><code>  function addNewRow(addNewRowLink)
    {
      var currentRow = addNewRowLink.closest('tr');
      currentRow.after('&lt;tr class="added-row"&gt;&lt;td&gt;This is new&lt;/td&gt;&lt;/tr&gt;');
  
      var newRowInDomTree = currentRow.next('tr');
      //This does not work
    }
  </code></pre>
  
  <p>The variable <code>newRowInDomTree</code> contains a <code>tr.existing-row</code> instead a <code>tr.added-row</code>. It seems that the DOM tree is not updated, but I don't undertand why.</p>
  
  <p>Any ideas?</p>