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

Question

我在另一个内部有两个div元素。有时，从用户交互性中删除这两个项目，并放置两个新元素。

首先删除现有元素是否合适？或者只是覆盖html？或者甚至重要吗？

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

或者只是

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

一个是较少的代码，但应该删除该项目吗？这些项目没有任何听众，但如果他们这样做了，那会有所作为吗？

我是一名潜入JS和jQuery的ActionScript开发人员。在AS中，如果存在任何侦听器，则首先删除该项以切断与该对象的任何关系，以便正确收集内存。这些规则与JS和jQuery相同吗？

谢谢！

Answer 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

Answer 2

$（ '＃ITEM1'）除去（）;将删除id为item1

的元素

$（ '＃ITEM1'）HTML（newItem1）。将在id为item1

的元素中设置html

Answer 3

如果您想具体了解实际删除的内容，请说如果您有一个需要删除的元素而不是另一个元素，那么我建议使用第一种方法。如果您只是每次都要更换所有内容，那么随意使用或者，唯一的问题就是更具可读性。

Answer 4

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