使用 jQuery 删除和添加新 html 的正确方法答案

【问题标题】：Proper way to remove and add new html with jQuery使用 jQuery 删除和添加新 html 的正确方法
【发布时间】：2012-06-07 02:16:59
【问题描述】：

我在另一个里面有两个 div 元素。有时，由于用户交互，这两个项目被删除，两个新元素被放置。

先删除现有元素是否合适？或者只是覆盖html？还是有关系？

$('#item1').remove();
$('#item2').remove();
$('#itemWindow').append(newItem1);
$('#itemWindow').append(newItem2);

或者干脆

$('#itemWindow').html(newItem1);
$('#itemWindow').append(newItem2);

一个是更少的代码，但是否应该删除该项目？这些项目没有任何听众，但如果他们有，那会有什么不同吗？

我是一名深入研究 JS 和 jQuery 的 ActionScript 开发人员。在 AS 中，如果存在任何侦听器，则应首先删除该项目以切断与该对象的任何联系，以便进行适当的内存收集。这些规则在 JS 和 jQuery 中是一样的吗？

谢谢！

【问题讨论】：

我认为关于监听器的答案将取决于你是否想要重用监听器......
如果您查看 jQuery 源代码，您会注意到 html() 方法的工作方式类似于 > this.empty().append( value )。您在不需要的地方变得复杂；-) 用于更短的代码，例如> $('#itemWindow').html(newItem1).append(newItem2);

【解决方案1】：

它们没有区别。所以你可以继续使用第二种方法。当你使用它时

$('#itemWindow').html(newItem1);

$('#item1') 和 $('#item2') 将被替换。所以你可以跳过手动删除。

正如@glavić 在评论中提到的，如果您在此处查看 jQuery 源代码中html 方法的定义https://github.com/jquery/jquery/blob/master/src/manipulation.js#L213 你会在最后发现它有这些行

 if ( elem ) {
    this.empty().append( value );
 }

在这种情况下elem 是真的。所以元素将是emptied，然后新元素将是appended。

如果他们有侦听器，那么您必须以某种方式绑定侦听器，以便它可以与动态添加的元素一起使用，例如使用 $.on

【讨论】：

【解决方案2】：

$('#item1').remove();将删除 id 为 item1 的元素

$('#item1').html(newItem1);将在 id 为 item1 的元素中设置 html

【讨论】：

【解决方案3】：

如果您想具体说明您实际删除的内容，假设您有一个元素需要删除，但没有另一个，那么我推荐第一种方法。如果您只是要每次都替换所有内容，那么请随意使用，或者，唯一的问题是什么对您来说更具可读性。

【讨论】：

【解决方案4】：

如果 item 有任何监听器，那么第一种方法更合适。 .remove() 删除项目本身和所有绑定事件。如果项目被删除但不是事件，将来可能会发生错误。但如果没有有界事件，则可以使用第二种方法 - 因为代码更少。

【讨论】：