如何获得对动态添加元素的引用？

Question

The following code is intended to insert a <p> element into the DOM before an already existing <p> element and then insert a table below the newly inserted <p> element (so that the table appears between the two <p> elements):

$("#para1").before("<p id = 'para2'>" + printDate + "</p>");
$("#para2").after("<table id = 'table'></table>"); 

However, when I try to add a row to the newly inserted table, like so:

$("#table").prepend("<tr><td>asdfasf</td></tr>");

the row always gets added to a different table (with a diffrent id) that sits before the <p> element with id para2 . What could be the reason for this strange behaviour?

This is a snapshot of the DOM inspector. How can the table with id 21-09-2014 be in two different places?

EDIT : 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!

Answer 1

The main problem for adding the entry to a different table might be duplicate ids in your page. If here are duplicate ids, the id selector will return the first element with the id.

To get the reference to newly added element use .insertBefore() and insertAfter() instead of before() and after() respectively.

var $para = $("<p id = 'para2'>" + printDate + "</p>").insertBefore('#para1');

var $table = $("<table id = 'table'></table>").insertAfter('#para2');
$table.append("<tr><td>asdfasf</td></tr>");

Answer 2

You're trying to prepend to a table? Shouldn't you use

$('#table tr:last').after('<tr><td>asdfasf</td></tr>');

instead?

or :first and before?

Answer 3

 $("#para1").before("<p id = 'para2'>The new p element with Id='para2' </p>"); $("#para2").after("<table id = 'table'><tr><td>The second row</td></tr></table>"); $("#table").prepend("<tr><td>new row inner #table and it will be the first row</td></tr>") 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="table-with-diferent-id">table with diferent id that already exist</table> <p id="para1">para 1</p>