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

В чем разница между функциями JQuery.clone() и .html()?

Документация Jquery гласит:

Метод .clone() выполняет глубокую копию набора совпадающих элементов, что означает, что он копирует согласованные элементы, а также все их потомков и текстовых узлов.

В HTML-документе .html() можно использовать для получения содержимого любого элемент. Если выражение селектора соответствует нескольким элементам, только в первом матче будет возвращен HTML-контент.

Мне кажется, что они взаимозаменяемы, так есть ли конкретная ситуация, когда кто-то будет использовать другой?

Ответ 1

.clone() возвращает объект jQuery, а .html() возвращает строку.

Используйте .clone(), если вы хотите скопировать объекты jQuery и используйте .html(), чтобы получить внутренний HTML-объект jQuery в строковом формате. Каждый метод имеет свою собственную цель (и стоимость).

Кроме того, как отметил sgroves, ".clone() выполняет глубокую копию набора элементов, найденных селектором, а .html() только [использует] первый сопоставленный элемент." *

* Обратите внимание, что .html(newContent) установит внутренний HTML set совпадающих элементов. Fiddle

Другое примечание: опция (как правило) "быстрее" заключается в использовании строк, а не объектов jQuery при выполнении манипуляций с DOM (JSPerf). Таким образом, я бы рекомендовал .html(), если вам нужно только текстовое содержимое. Опять же: каждый метод имеет свою собственную цель.

Ответ 2

Вот список различий:

.clone может использоваться для нескольких выбранных элементов, а .html() возвращает только html первого элемента.
.clone возвращает объект jQuery, а .html возвращает строку.
.clone может (если указано) сохранять событие и данные элемента DOM. .html не будет.
.clone делает копию выбранного элемента и всех его потомков, в то время как .html получает только его потомки. Другими словами, по сравнению с методами DOM, .clone похож на .outerHTML и .html больше похож на .innerHTML.

Ответ 3

Метод clone() скопирует данные и события, связанные с копируемыми элементами DOM, этот метод возвращает объект jQuery для цели. html() - это просто строковое представление DOM, что означает, что ни одно из событий/данных, связанных с этой частью DOM, не будет скопировано, этот метод возвращает только строку.

Изменить # 2 Убрал мои комментарии о том, что clone() работает так же быстро, как html(), но на самом деле он медленнее. Примеры можно увидеть ниже в комментариях Кейси Фалька.

Ответ 4

из цитируемых предложений, которые вы разместили выше ответа, есть:

.clone() он копирует согласованные элементы, а также все их дочерние элементы и текстовые узлы. означает, что он выбирает все элементы в селекторе.

while .html() он выбирает только первый элемент.