jQuery .html () по сравнению с .append ()
Что ж, если вы хотите сделать свой компонент многоразового использования флажками, что вам и следует сделать, то вам нужно будет сохранить состояние в вашем компоненте флажков и ожидать обработчик события onChange, где бы вы ни хотели использовать этот компонент флажков.
6 ответов
Когда вы передаете строку HTML любому из методов jQuery, происходит следующее:
Создается временный элемент, назовем его x. x innerHTML установлен на строку HTML, которую вы передали. Затем jQuery перенесет каждый из созданных узлов (то есть x childNodes ) во вновь созданный фрагмент документа, который затем будет кэшироваться в следующий раз. Затем он вернет фрагменты childNodes как новую коллекцию DOM.
Обратите внимание, что на самом деле это намного сложнее, поскольку jQuery выполняет множество кроссбраузерных проверок и различных других оптимизаций. Например. если вы передадите просто в jQuery () , jQuery примет ярлык и просто выполнит document.createElement ('div') .
РЕДАКТИРОВАТЬ : Чтобы увидеть огромное количество проверок, которые выполняет jQuery, посмотрите здесь , здесь и здесь .
innerHTML обычно более быстрый подход, хотя не позволяйте ему определять то, что вы делаете все время. Подход jQuery не так прост, как element.innerHTML = ... - как я уже упоминал, происходит множество проверок и оптимизаций.
Правильная техника во многом зависит от ситуации. Если вы хотите создать большое количество идентичных элементов, последнее, что вам нужно сделать, это создать массивный цикл, создавая новый объект jQuery на каждой итерации. Например. самый быстрый способ создать 100 блоков с помощью jQuery:
jQuery(Array(101).join('<div></div>'));
Также необходимо учитывать проблемы удобочитаемости и обслуживания.
Это:
$('<div id="' + someID + '" class="foobar">' + content + '</div>');
... намного труднее поддерживать, чем это:
$('<div/>', {
id: someID,
className: 'foobar',
html: content
});
если под .add вы имеете в виду .append , то результат будет таким же, если #myDiv пуст.
Производительность такая же? не знаю.
.html (x) в конечном итоге выполняет то же самое, что и .empty (). Append (x)
Это не одно и то же. Первый заменяет HTML без предварительного создания другого объекта jQuery. Второй создает дополнительную обертку jQuery для второго div, а затем добавляет ее к первому.
Одна jQuery-обертка (по примеру):
$("#myDiv").html('<div id="mySecondDiv"></div>');
$("#myDiv").append('<div id="mySecondDiv"></div>');
Две jQuery-обертки (по примеру):
var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').html(mySecondDiv);
var mySecondDiv=$('<div id="mySecondDiv"></div>');
$('#myDiv').append(mySecondDiv);
У вас есть несколько различных вариантов использования. Если вы хотите заменить содержимое, то .html - отличный вариант, поскольку он эквивалентен innerHTML = "...". Однако если вы хотите просто добавить содержимое, то дополнительный набор оберток $() не нужен.
Используйте две обертки только в том случае, если вам нужно в дальнейшем манипулировать добавленным div. Даже в этом случае, возможно, вам понадобится только одна:
var mySecondDiv = $("<div id='mySecondDiv'></div>").appendTo("#myDiv");
// other code here
mySecondDiv.hide();
Ну, .html () использует .innerHTML , что быстрее, чем создание DOM .
Для достижения того же эффекта можно воспользоваться вторым способом:
var mySecondDiv = $('<div></div>');
$(mySecondDiv).find('div').attr('id', 'mySecondDiv');
$('#myDiv').append(mySecondDiv);
Лука упомянул, что html() просто вставляет hte HTML, что приводит к более высокой производительности.
Однако в некоторых случаях лучше выбрать второй вариант, например:
// Clumsy string concat, error prone
$('#myDiv').html("<div style='width:'" + myWidth + "'px'>Lorem ipsum</div>");
// Isn't this a lot cleaner? (though longer)
var newDiv = $('<div></div>');
$(newDiv).find('div').css('width', myWidth);
$('#myDiv').append(newDiv);