понимание эффект Jquery заявления

Question

Я искал простой способ получить содержимое Jquery элемента и наткнулся на эту страницу: http://jquery-howto.blogspot.com/2009/02/how-to-get-full-html-string-including.html

Она имеет следующий код

var html = $('<div>').append($('#top').clone()).remove().html(); 

Их объяснение состоит в том, как следующим образом:

1) Клонирование выбран ДИВ

2) Создание нового DIV объект DOM и добавление создали клон DIV

3) Затем получаю содержимое завернутых DIV (которые дали бы нам весь HTML)

4) Наконец удаление созданного объекта DOM, так что это не загромождать наш DOM дерево.

Мой вопрос в следующем: 1) это выглядит как первое, что это делает, это создать новый DIV, не прикрепленную к йот, так почему он должен иметь «удалить» вызов ? 2) Я понимаю, почему он не приходит на этом примере, но в целом есть большая разница между делать

A: $('<div>').append('<span>foobar</span>') 
B: $('<div><span>foobar</span></div>) 

Answer 1

Для того, он делает это:

1. Создать новый объект пустой DIV (не в the DOM еще)
2. Найти объект "#top" на вашей странице
3. Клон, который "#top" объект.
4. Append этот клон ранее созданный объект DIV
5. Удалить весь объект DIV из DOM и очистить любые связанные JQuery данные в какой-либо из объектов
6. Получить innerHTML объекта DIV

Единственное, что делает здесь .remove(), - это очистка любых данных jQuery, связанных с любыми объектами в дереве, которые в противном случае не произошли бы на этом этапе.

В ваших примерах A и B технически не должно быть разницы между ними. На практике я обнаружил несколько ошибок в более старых версиях IE с опцией B. jQuery, похоже, следует коду, содержащему фрагменты документа, и я видел некоторые проблемы с этим.

Answer 2

Я не эксперт JQuery, но после того, как Мессинг с WebKit в Web Inspector с кодом вы сказали, что вы правы: remove() не требуется, поскольку возвращаемая переменная не добавляется в DOM и даже не кажется объектом jQuery.

Что касается части 2), то единственное различие, которое я бы подумал, это часть A, которая создает элемент и использует внутренний вызов DOM innerHTML и appendChild, тогда как часть B просто создает элемент и выполняет вызов innerHTML. посмотрел на источник jQuery, но это моя догадка. С точки зрения производительности это не делает разницы с маленькими строками, как те, но я предпочитаю читаемость А.