jQuery добавление HTML или добавление существующего элемента

Question

У меня есть строка big_html, и я хочу добавить ее в некоторый div. Я заметил разницу в производительности в следующем:

$('#some-div').append( big_html );
// takes about 100 ms

//create it first
var append_objs = $(big_html);
$('#some-div').append( append_objs );
//takes about 150 ms

Кто-нибудь знает, почему это происходит? Спасибо за ваше время.

EDIT: Я пытаюсь получить материал, который добавляю на страницу. Я также попробовал

var added = $(big_html).appendTo( '#some-div' );
//150 ms

Есть ли эффективный способ сделать это?

Answer 1

Во втором случае jQuery заставляет браузер создавать фрагмент документа, а затем вставляет в него HTML-код для анализа браузером. Затем он снова манипулирует DOM, когда вы добавляете это на свою страницу.

Таким образом, вторая версия просто выполняет больше работы, чем первая.

Я призываю вас (и всех, кто заинтересован) держать неуменьшенную версию jQuery для ознакомления. Это просто читать код.

Чтобы «получить» ваш контент после , он добавляется в DOM, зависит от того, что это такое. Поскольку содержимое добавляется , вам нужно начать с запоминания последнего элемента цели:

var last = $('#some_div > *:last');
$('#some_div').append(big_html_string);
var newStuff = last.nextAll();

Если целевой div может начинаться с пустого места, вам также необходимо проверить это:

var newStuff = last.length ? last.nextAll() : $('#some_div > *');