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

145

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

jquery DMCS
источник
2
это помогло мне! Я пытался динамически изменить текст метки с помощью jquery, и этот поток определенно помог мне. Спасибо!
HereToLearn_

Ответы:

289

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

Паоло Бергантино
источник
1
Хорошее объяснение!
Луис Гувейя
31

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

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

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

CGP
источник
3
+1 очень полезно записать, что replaceWith () фактически не удаляет элемент. Я не понял это!
Питер
2
Это правда, это все еще существует. Его нет в DOM, так что вы его не увидите, но это все еще верный фрагмент HTML. Доказательство: jsbin.com/ofirip/2
cgp
1
Да, это правда. спасибо за пример Я думал о том, чтобы удалить его из DOM (плюс сборщик мусора), по сути, удаление с моей точки зрения. Но ты технически прав. Я удалю -1и, надеюсь, это будет полезно для всех. :)
Питер
1
Спасибо за примечание, метод replaceWith (), возвращающий старый элемент, вызвал у меня некоторое разочарование при отладке :(
dain
2
Да, я боролся с этим, по крайней мере, полчаса, я просто понял, что функция возвращает замененный элемент, я ожидал, что он вернет новый с кодом, подобным следующему: var $form = $target.closest('tr').replaceWith(html) оказывается, $formсодержит элемент перед заменой. вздох
Павел Краковяк,
5

Существует два способа использования функций 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>
Harsha
источник
2

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

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

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

(Не закрывая мой </center>дорогой мне мой вечер!)

Бенджамин Вуттон
источник
6
Вот почему вы не должны больше использовать центр. : p
Romain Tribes
2

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

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

mistajolly
источник