稍后通过 jQuery 使用动态创建的 html 内容答案

【问题标题】：Use dynamically created html content later with jQuery稍后通过 jQuery 使用动态创建的 html 内容
【发布时间】：2013-08-18 19:55:49
【问题描述】：

我有一个动态创建表并将其分配给局部变量的方法：

 var content = $('<table id="gvCapitalByYear" cellspacing="0"
       cellpadding="2"/>').append('<tbody/>');

然后我有一个循环，旨在将行添加到上面创建的表中。但我无论如何都做不到。我尝试了以下方法：

content=$('#gvCapitalByYear').find('tbody').append('<tr/>');

但它不起作用，因为在我看来，id 为“gvCapitalByYear”的元素没有附加到任何地方，它只是动态创建并保存在变量中。是否有可能以某种方式使用内容变量获取动态创建的表，添加一定数量的行并将其重新分配回内容变量？

【问题讨论】：

标签： jquery dynamic-content

【解决方案1】：

您需要使用 content 变量而不是查询 DOM 以获取这些元素（例如，$('#gvCapitalByYear')），因为内容尚未附加到 DOM。

一旦将表格 HTML 包装为 jQuery 对象，您就可以像任何其他 jQuery 对象一样查询和操作它。该对象是“活动的”，因此您无需在追加更多内容后重新分配 content 变量。

var content = $('<table id="gvCapitalByYear" cellspacing="0" cellpadding="2"><tbody></tbody></table>');
//later, add as many rows as you like
content.find('tbody').append('<tr><td>Some Content Here</td></tr>');

另外，table、tbody 和 tr 元素不是自关闭标签，您需要为每个元素设置一个开始标签和结束标签，才能使其成为有效的 HTML。

Working Demo

【讨论】：

是的，我知道我必须将它添加到 DOM，但我不想这样做。相反，我想使用 content 变量来保留之前创建的 html 内容。
如果我知道我必须添加多少行就可以了，但是要添加到表中的行数是可变的。是的，我首先创建表，然后进入一个循环，该循环遍历一个数组并添加与数组计数一样多的行。
这在这种情况下工作得很好；我更新了演示如何动态添加 10 行。

【解决方案2】：

试试这个

$('body').append('<table id="gvCapitalByYear" cellspacing="0"
   cellpadding="2"></table>');

然后

$('#gvCapitalByYear').append('<tr><td>my data</td><td>more data</td></tr>');

【讨论】：

再次，我知道要稍后引用“gvCapitalByYear”，我需要将其附加到正文，或者至少附加到内容相同的某个容器中，但这就是为什么我需要一种使用方法用于提取 html 内容的本地内容变量。