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')를 사용하는 경우로 대체됩니다. 따라서 수동으로 제거하지 않아도됩니다. 당신이 jQuery를 소스에 html 방법의 정의를 보면 @ ​​glavić 코멘트에서 언급 여기 https://github.com/jquery/jquery/blob/master/src/manipulation.js#L213 당신이이 라인

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

이 경우 elem이 참

을 가지고 마지막에 발견 할 것이다으로

. 따라서 요소는 emptied이고 새 요소는 appended이됩니다. 그들은 다음 청취자가 있다면

는 그리고 당신은 $.on

Answer 2

$ ('#의 항목 1')를 사용하는 것과 같이 동적으로 추가 요소와 함께 작동되도록하는 방식으로 청취자를 바인드 할 필요가 제거().; id가 1 인 요소를 제거합니다.

$ ('# item1') .html (newItem1); id가 item1 인 요소 내의 html을 설정합니다.

Answer 3

실제로 제거하는 항목에 대해 구체적으로 설명하고 싶다면 제거해야 할 요소가 하나 있지만 다른 항목이없는 경우에는 첫 번째 방법. 매번 모든 것을 바꿀 예정이라면, 둘 중 하나를 자유롭게 사용하거나, 유일한 문제는 당신을 위해 더 읽기 쉬운 것입니다.

Answer 4

항목에 수신기가있는 경우 첫 번째 방법이 더 적절합니다. .remove()은 항목 자체와 모든 바운드 이벤트를 제거합니다. 항목이 제거되었지만 이벤트가 아닌 경우 장래에 오류가 발생할 수 있습니다. 하지만 한정된 이벤트가 없다면 두 번째 방법을 사용할 수 있습니다.