jquery .append가 IE에서 예상대로 작동하지 않습니다.

Question

이 섹션이 있습니다.

<section class="note"> 
    Content-0: SomeContent that needs to be removed. Anything below this stays. 
    <br /> 
    <div class="content1">Content-1: Stays <br /><br /></div> 
    <div class="content2"><p>Content-2: Stays</p></div> 
</section> 

내가 원하는 것은 페이지에서 콘텐츠 0 줄을 제거하고 단지 두 개를 가지고 있습니다. 그래서 나는 부하에이 코드 ...

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     var content1 = $('section.note div.content1'); 
     var content2 = $('section.note div.content2'); 

     $('section.note').html('').append(content1).append(content2); 
     alert($('section.note').html()); 
    }); 
</script> 

을하지만 IE (모든 버전)에서 이상한 행동을한다. IE 10에서는 div가 추가되지만 내용은 없습니다. 다른 IE 버전에서는 Content-0을 제거하지 않고 모든 것을 그대로 유지합니다.

FireFox에서 제대로 작동합니다.

Answer 1

이 시도 :

기본적으로 무슨 일이 일어 났는지

$(function() { 
    var content1 = $('section.note div.content1').clone(); 
    var content2 = $('section.note div.content2').clone(); 

    $('section.note').html('').append(content1).append(content2); 
    alert($('section.note').html()); 
}); 

은 여기 : var content1 = $('section.note div.content1') 당신이 실제 DOM 요소에 참조하고, 당신이 먼저 $('section.note').html('')으로 DOM 요소를 제거하고 다시 이러한 참조를 추가 만에 그 동안 텍스트는 html을 ''로 설정하여 사라졌습니다. 따라서 원래의 DOM 요소를 더 이상 참조하지 않으므로 해당 div를 복제하면 수정됩니다.

Answer 2

jquery가 이전의 .html('') 호출에 의해 제거 되었기 때문에 jquery가 올바르게 이동할 수없는 것처럼 IE가 요소를 너무 빨리 정리하는 것처럼 보입니다. 복제 또는 분리를 통해 문제를 해결할 수 있습니다.

http://jsfiddle.net/DrxFV/2/

var content1 = $('section.note div.content1').detach(); 
var content2 = $('section.note div.content2').detach(); 
$('section.note').html('').append(content1).append(content2);