Яка різниця між jQuery's substituWith () та html ()?

145

Яка різниця між функціями ZamWith () і html () jQuery при передачі 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 () замінює вміст елемента, тоді як substituWith () замінює фактичний елемент.

— Паоло Бергантіно
джерело

1

Приємне пояснення!

— Луїс Говейя

31

substituWith () замінить поточний елемент, тоді як html () просто замінює вміст.

Зауважте, що елемент substituWith () фактично не видалить елемент, а просто видалить його з DOM та поверне вам його у колекції.

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

— cgp
джерело

3

+1 дуже корисно, щоб він записував, що substituWith () насправді не видаляє елемент. Я цього не з'ясував!

— Пітер

2

Це правда, вона все ще існує. Його немає в DOM, тому ви його не побачите, але це все-таки дійсний фрагмент HTML. Доказ: jsbin.com/ofirip/2

— cgp

1

так, це правда. дякую за те, що ви поставили приклад. Я думав видалити його з DOM (плюс вивезення сміття) як фактично видалення з моєї точки зору. Але ви технічно правильні. Я видалю -1і, сподіваюся, це буде корисним для всіх. :)

— Пітер

1

Дякую за записку, ReplaceWith () повернення старого елемента просто дав мені деяку отладочную розчарування :(

— Дейн

2

Так, я боровся з цим щонайменше півгодини, я просто зрозумів, що функція повертає замінений елемент, я очікував, що він поверне новий з таким кодом: var $form = $target.closest('tr').replaceWith(html) Виявляється, $formмістить елемент перед заміною. зітхання

— Pawel Krakowiak

5

Існує два способи використання html () та substituWith () функцій Jquery.

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

1.) html () vs substituWith ()

var html = $('#test_id p').html(); поверне "Мій вміст"

Але var replaceWith = $('#test_id p').replaceWith();поверне весь об'єкт DOM <p>My Content</p>.

2.) html ('value') vs substituWith ('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>

— Харша
джерело

2

Старе питання, але це може комусь допомогти.

Існують деякі відмінності в роботі цих функцій в Internet Explorer і Chrome / Firefox, якщо ваш HTML недійсний.

Очистіть свій HTML, і вони працюватимуть як документально.

(Не закриваючи мене </center>коштував мій вечір!)

— Бенджамін Вуттон
джерело

6

Ось чому вам більше не слід використовувати центр. : p

— Роменські племена

2

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

Дивіться: https://jsperf.com/jquery-html-vs-empty-append-test

— помилково
джерело