title: How to get reference to a dynamically added element?
body: <p>The following code is intended to insert a <code>&lt;p&gt;</code> element into the <code>DOM</code> before an already existing <code>&lt;p&gt;</code> element and then insert a table below the newly inserted <code>&lt;p&gt;</code> element (so that the table appears between the two <code>&lt;p&gt;</code> elements):</p>
  
  <pre><code>$("#para1").before("&lt;p id = 'para2'&gt;" + printDate + "&lt;/p&gt;");
  $("#para2").after("&lt;table id = 'table'&gt;&lt;/table&gt;"); 
  </code></pre>
  
  <p>However, when I try to add a row to the newly inserted table, like so:</p>
  
  <pre><code>$("#table").prepend("&lt;tr&gt;&lt;td&gt;asdfasf&lt;/td&gt;&lt;/tr&gt;");
  </code></pre>
  
  <p>the row always gets added to a different table (with a diffrent id) that sits before the <code>&lt;p&gt;</code> element with id <code>para2</code>. What could be the reason for this strange behaviour?</p>
  
  <p>This is a snapshot of the DOM inspector. How can the table with id <code>21-09-2014</code> be in two different places?</p>
  
  <p><img src="https://i.stack.imgur.com/oVeXX.png" alt="enter image description here"></p>
  
  <p><strong>EDIT</strong>:
  You were all correct. I had added an empty table with the same id earlier and thought it wasn't there because I couldn't see it. That brat cost me 5 hours of billable work!</p>