jquery .html () vs .append ()

Скажімо, у мене порожній div:

<div id='myDiv'></div>

Це є:

$('#myDiv').html("<div id='mySecondDiv'></div>");

Такий же як і:

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

Щоразу, коли ви передаєте рядок HTML будь-якому із методів jQuery, це відбувається так:

Створюється тимчасовий елемент, назвемо його x. x's innerHTMLвстановлюється у рядок HTML, який ви передали. Тоді jQuery передасть кожен із створених вузлів (тобто х childNodes) на новостворений фрагмент документа, який він буде кешувати наступний раз. Потім поверне фрагмент childNodesяк свіжу колекцію DOM.

Зауважте, що насправді це набагато складніше, ніж це, тому що jQuery робить купу перевірок між браузерами та різні інші оптимізації. Наприклад, якщо ви переходите просто <div></div>до jQuery(), jQuery візьме ярлик і просто зробить document.createElement('div').

EDIT : Щоб побачити велику кількість перевірок, які виконує 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
});

Вони не однакові. Перший замінює HTML, не створюючи спочатку іншого об'єкта jQuery. Другий створює додатковий оболонку jQuery для другого діла, потім додає його до першого.

Один пакунок 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();

якщо .addви маєте на увазі .append, то результат такий самий, якщо #myDivпорожній.

продуктивність однакова? не знаю.

.html(x) закінчується робити те саме, що і .empty().append(x)

Ну, .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);

.html() замінить усе.

.append() просто додаватиметься наприкінці.

Окрім наведених відповідей, якщо у вас є щось подібне:

<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;
        }
    }

Це сталося зі мною. Версія Jquery: 3.3. Якщо ви переглядаєте список об'єктів і хочете додати кожен об'єкт як дочірній елемент якогось батьківського елемента dom, то .html та .append будуть вести себе дуже різними. .htmlв кінцевому підсумку додасть лише останній об'єкт до батьківського елемента, тоді як .appendдодасть усі об'єкти списку як дочірні батьківські елементи.