Правильный способ удалить и добавить новый html с помощью jQuery

Question

У меня есть два элемента div внутри другого. Время от времени, из интерактивности пользователя, эти два элемента удаляются, и два новых элемента помещаются.

Правильно ли сначала удалить существующие элементы? Или просто переписать html? Или это даже имеет значение?

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

Или просто

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

Один меньше кода, но если элемент будет удален, а? У предметов нет слушателей, но если они это сделали, это имеет значение?

Я разработчик ActionScript, погружающийся в JS и jQuery. В AS, если существуют какие-либо слушатели, необходимо сначала удалить элемент, чтобы разорвать любые связи с объектом, для правильной коллекции памяти. Являются ли эти правила одинаковыми с JS и jQuery?

Спасибо!

Answer 1

У них нет разницы. Таким образом, вы можете использовать второй метод. как и при использовании этого

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

$('#item1') и $('#item2') будут заменены. Таким образом, вы можете пропустить удаление вручную.

Как @ Glavic упоминается в комментариях, если вы посмотрите на определение html метода в источнике JQuery здесь https://github.com/jquery/jquery/blob/master/src/manipulation.js#L213 Вы найдете в конце он имеет эти строки

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

Где в этом случае elem верно , Таким образом, элемент будет emptied, а затем новый элемент будет appended.

И если бы они имели слушателей, то вы должны связать слушателей таким образом, так что он работает с динамически добавляемых элементов, как с помощью $.on

Answer 2

$ («#») ITEM1 удалить(). удалит элемент с идентификатором item1

$ ('# item1'). html (newItem1); будет устанавливать html внутри элемента с идентификатором item1

Answer 3

Если вы хотите уточнить, что вы фактически удаляете, скажите в случае, если у вас есть один элемент, который нужно удалить, но не другой, тогда я рекомендую первый метод. Если вы просто собираетесь каждый раз заменять все, тогда не стесняйтесь использовать их или, единственная проблема - это то, что более читаемо для вас.

Answer 4

Если у предмета есть слушатель, то более подходящим является первый метод. .remove() удаляет элементы и все связанные события. если элемент удален, но не событие, в будущем может произойти ошибка. но если нет ограниченного события, можно использовать второй метод - меньше кода.