Разница между использованием .html() и .contents()

В чем разница между использованием этих двух фрагментов jQuery?

.append( $(this).contents() );
// and
.append( $(this).html() );

Ответ 2

Да, они совершенно разные

.contents() предоставляет объект jQuery, содержащий все дочерние DOM-узлы .
.html() дает вам строку HTML, отображаемую из потомков узла.

Итак, когда вы .append() contents(), вы перемещаете узлы в новое место.

Когда вы .append() .html(), вы создаете новые узлы из строки HTML.

Имейте в виду, что на стороне клиента нет HTML. У вас есть только DOM.

Учитывая, что...

... когда вы делаете .html(), происходит то, что все узлы DOM-потомков анализируются, и создается и возвращается строка HTML.
... когда вы делаете .html('<b>some HTML content</b>'), сама строка HTML не добавляется в DOM, но, скорее, строка анализируется, и генерируются новые узлы DOM, которые затем добавляются в DOM.

Основываясь на комментариях о резке и копировании, кажется, что вы все еще думаете, что работаете со исходной строкой HTML, отправленной с сервера.

Ты не.

Вы работаете с объектами JavaScript (ну, объектами хоста), которые вложены друг в друга для формирования иерархии объектов (родителей, детей, внуков и т.д.). Вы можете переместить раздел этой иерархии в другое место в иерархии.

Эта иерархия элементов называется DOM или Document Object Model.

К сожалению, поскольку jQuery .append() принимает строку HTML, это добавляет иллюзию, что вы на самом деле имеете дело с разметкой HTML вместо объектов.

Итак, я снова укажу это...

.html() генерирует новую строку HTML. Когда вы передадите строку .append(), она будет создавать новые узлы на основе этой строки и вставлять их.
.contents() просто выбирает существующие узлы и вставляет их. Поскольку node не может находиться в двух местах одновременно, узлы перемещаются в местоположение в DOM, где они добавляются.

Ответ 1

Ответ 2