В чем разница между replaceQith () и html () в jQuery?

Question

В чем разница между функциями jQuery replaceWith () и html (), когда в качестве параметра передается HTML?

Answer 1

Возьмите этот 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 () заменяет фактический элемент.

Answer 2

replaceWith () заменит текущий элемент, тогда как html () просто заменит содержимое.

Обратите внимание, что replaceWith () на самом деле не удалит элемент, а просто удалит его из DOM и вернет вам в коллекции.

Пример для Питера: http://jsbin.com/ofirip/2

Answer 3

Существует два способа использования функций jquery html () и replaceWith ().

<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 ('значение') против replaceWith ('значение')

$('#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>

Answer 4

Старый вопрос, но это может кому-то помочь.

Существуют некоторые различия в работе этих функций в Internet Explorer и Chrome / Firefox, если ваш HTML-код недействителен.

Очистите ваш HTML, и они будут работать как задокументировано.

(Не закрывая мои </center> стоило мне мой вечер!)

Answer 5

Также может быть полезно знать, что .empty().append() также может использоваться вместо .html(). В показанном ниже тесте это происходит быстрее, но только если вам нужно многократно вызывать эту функцию.

См .: https://jsperf.com/jquery-html-vs-empty-append-test