jQuery의 replaceWith ()와 html ()의 차이점은 무엇입니까?

HTML을 매개 변수로 전달할 때 jQuery의 replaceWith () 및 html () 함수의 차이점은 무엇입니까?

이 HTML 코드를 보자 :

<div id="mydiv">Hello World</div>

하기:

$('#mydiv').html('Aloha World');

결과는 다음과 같습니다.

<div id="mydiv">Aloha World</div>

하기:

$('#mydiv').replaceWith('Aloha World');

결과는 다음과 같습니다.

Aloha World

따라서 html () 은 요소의 내용을 대체하고 replaceWith () 는 실제 요소를 대체합니다.

replaceWith ()는 현재 요소를 대체하지만 html ()은 단순히 내용을 대체합니다.

replaceWith ()는 실제로 요소를 삭제하는 것이 아니라 DOM에서 요소를 제거하고 컬렉션에서 반환합니다.

Peter의 예 : http://jsbin.com/ofirip/2

html () 및 replaceWith () Jquery 함수를 사용하는 방법에는 두 가지가 있습니다.

<div id="test_id">
   <p>My Content</p>
</div>

1.) html () 대 replaceWith ()

var html = $('#test_id p').html(); "내 콘텐츠"를 반환합니다

그러나의 var replaceWith = $('#test_id p').replaceWith();전체 DOM 객체를 반환합니다 <p>My Content</p>.

2.) html ( 'value') vs replaceWith ( 'value')

$('#test_id p').html('<h1>H1 content</h1>'); 당신에게 다음과 같은 설명을 드리겠습니다.

<div id="test_id">
  <p><h1>H1 content</h1></p>
</div>

그러나 $('#test_id p').replaceWith('<h1>H1 content</h1>');의지는 다음과 같은 결론을 내릴 것입니다.

<div id="test_id">
      <h1>H1 content</h1>
</div>

오래된 질문이지만 이것은 누군가를 도울 수 있습니다.

HTML이 유효하지 않은 경우 Internet Explorer 및 Chrome / Firefox에서 이러한 기능이 작동하는 방식에는 약간의 차이가 있습니다.

HTML을 정리하면 문서화 된대로 작동합니다.

( </center>내 저녁을 닫지 않았어!)

.empty().append()대신 사용할 수도 있음 을 아는 것도 유용 할 수 있습니다 .html(). 아래 표시된 벤치 마크에서는이 기능이 더 빠르지 만이 함수를 여러 번 호출해야하는 경우에만 해당됩니다.

참조 : https://jsperf.com/jquery-html-vs-empty-append-test