В чем разница между 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