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

Question

以下代码旨在将<p>元素插入到已存在的DOM元素之前的<p>中，然后在新插入的<p>元素下插入一个表格（这样表就出现在两个<p>元素之间了：

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

但是，当我尝试向新插入的表添加一行时，如下所示：

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

该行总是被添加到位于<p>元素之前且标识为para2的不同表（具有不同的ID）。这种奇怪行为可能是什么原因？

这是DOM检查器的快照。身份21-09-2014的表如何位于两个不同的位置？

修改： 你们都是对的。我之前添加了一个具有相同id的空表，并认为它不存在，因为我看不到它。那个小子花了我5个小时的计费工作！

Answer 1

将条目添加到其他表格的主要问题可能是页面中的重复ids。如果这里有重复的id，则id选择器将返回带有id的第一个元素。

要获取对新添加元素的引用，请分别使用.insertBefore()和insertAfter()代替before()和after()。

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

您是否试图在桌子前面添加？不应该使用

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

代替？

或：首先和之前？

Answer 3

＆＃13;

＆＃13;

$("#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>")

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;