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