Какая разница между jQuery replaceWith() и html()?

Ответ 1

Возьмите этот код HTML:

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

Doing:

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

приведет к:

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

Doing:

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

приведет к:

Aloha World

Итак html() заменяет содержимое элемента, а replaceWith() заменяет действительный элемент.

Ответ 2

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

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

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

Ответ 3

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

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

1.) html() vs 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>

Ответ 4

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

Есть некоторые отличия в том, как эти функции работают в Internet Explorer и Chrome/Firefox, если ваш HTML недопустим.

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

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

Ответ 5

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

Смотрите: https://jsperf.com/jquery-html-vs-empty-append-test