Jquery.html() vs .append()

Ответ 1

Всякий раз, когда вы передаете строку HTML в любой из методов jQuery, это происходит:

Создается временный элемент, назовите его x. x innerHTML устанавливается в строку HTML, которую вы передали. Затем jQuery передаст каждый из созданных узлов (т.е. X childNodes) на вновь созданный фрагмент документа, который затем будет кэширован в следующий раз. Затем он вернет фрагмент childNodes в виде новой коллекции DOM.

Обратите внимание, что на самом деле это намного сложнее, поскольку jQuery выполняет кучу кросс-браузерных проверок и различных других оптимизаций. Например. если вы пройдете только <div></div> до jQuery(), jQuery возьмет ярлык и просто сделает document.createElement('div').

EDIT. Чтобы увидеть огромное количество проверок, выполняемых jQuery, посмотрите здесь, здесь и здесь.

innerHTML - это, как правило, более быстрый подход, хотя не позволяйте этому управлять тем, что вы делаете все время. Подход jQuery не так прост, как element.innerHTML = ... - как я уже упоминал, существует множество проверок и оптимизаций.

Правильная техника сильно зависит от ситуации. Если вы хотите создать большое количество идентичных элементов, то последнее, что вы хотите сделать, это создать массивный цикл, создавая новый объект jQuery на каждой итерации. Например. самый быстрый способ создать 100 div с jQuery:

jQuery(Array(101).join('<div></div>'));

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

Это:

$('<div id="' + someID + '" class="foobar">' + content + '</div>');

... намного сложнее поддерживать, чем это:

$('<div/>', {
    id: someID,
    className: 'foobar',
    html: content
});

Ответ 2

Они не совпадают. Первый заменяет HTML без создания другого объекта jQuery. Второй создает дополнительную оболочку jQuery для второго div, а затем добавляет ее к первому.

Один jQuery Wrapper (на пример):

$("#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();

Ответ 3

Если по .add вы имеете в виду .append, тогда результат будет таким же, если #myDiv пуст.

- производительность такая же? не знаю.

.html(x) заканчивается тем же, что и .empty().append(x)

Ответ 4

Ну, .html() использует .innerHTML который быстрее, чем создание DOM.

Ответ 5

Вы можете получить второй метод для достижения того же эффекта:

var mySecondDiv = $('<div></div>');
$(mySecondDiv).find('div').attr('id', 'mySecondDiv');
$('#myDiv').append(mySecondDiv);

Luca отметил, что 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);

Ответ 6

Кроме данных ответов, в случае, если у вас есть что-то вроде этого:

<div id="test">
    <input type="file" name="file0" onchange="changed()">
</div>
<script type="text/javascript">
    var isAllowed = true;
    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = $('#test').html();
            tmpHTML += "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').html(tmpHTML);
            isAllowed = false;
        }
    }
</script>

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

    function changed()
    {
        if (isAllowed)
        {
            var tmpHTML = "<input type=\"file\" name=\"file1\" onchange=\"changed()\">";
            $('#test').append(tmpHTML);
            isAllowed = false;
        }
    }

Ответ 7

Это случилось со мной. Версия Jquery: 3.3. Если вы просматриваете список объектов и хотите добавить каждый объект в качестве дочернего элемента некоторого родительского элемента dom, то .html и .append будут вести себя очень по-разному. .html добавит только последний объект к родительскому элементу, тогда как .append добавит все объекты списка в качестве дочерних элементов родительского элемента.