DOM: append vs appendChild. Що використовувати на практиці?

Для того, щоб вставити контент в HTML сторінку, нам необхідно взаємодіяти з DOM (Document Object Model) - об'єктною моделлю документа.

Для вирішення цього завдання існує цілий ряд методів, наприклад, для вставки в документ можна використовувати методи append та appenChild.

Однак краще використовувати саме метод append разом з такими методами як:

• prepend
• before
• after
• remove
• replaceWith

Замість таких методів, які вважаються застарілими. Але які все ще можна зустріти у старих скриптах:

• appendChild
• insertBefore
• replaceChild
• removeChild

Давайте розберемося в чому сенс цієї рекомендації і чому краще використовувати append замість appendChild.

"append" vs "appendChild"

append specification
appendChild specification

"appendChild"

Метод element.appendChild(node) має низку наступних особливостей:

1. додає node - DOM-елемент до кінця списку дочірніх елементів в element.
2. повертає доданий елемент node (крім випадків коли node - це DocumentFragment)
3. якщо node є посиланням на існуючий елемент DOM, цей елемент буде переміщений в нову позицію

"append"

Метод element.append(...nodes or strings) має низку наступних особливостей:

1. додає nodes - DOM-елементи, або строкові значення, до кінця списку дочірніх елементів в element
2. нічого не повертає (буде повернено значення undefined)
3. дозволяє додати кілька DOM елементів або рядків
4. якщо node є посиланням на існуючий елемент DOM, цей елемент буде переміщений в нову позицію

Різниця між "append" vs "appendChild"

1. append приймає як DOM-елементи так і строкові значення, в той час як appendChild тільки DOM-елементи
2. append дозволяє додати в DOM одразу кілька значень, appendChild дозволяє додати лише одне значення
3. append нічого не повертає, appendChild поверне доданий елемент

Висновок

Перші дві відмінності роблять використання методу append більш гнучким, порівняно з методом appendChild, через те що на практиці часто доводиться вставляти рядки або кілька елементів за раз, а ось повернення вставленого елемента потрібно у дуже рідких випадках.

Також, з вищезгаданих відмінностей слід, що можна сміливо замінити виклик appendChild на append без наслідків, але не навпаки.

Усі застарілі методи: insertBefore, replaceChild, removeChild, мають таку ж саму специфіку поведінки що і appendChild:

• працюють тільки з DOM-елементами
• дозволяють вставити лише одне значення
• повертають вставлений елемент

Тому вибір на користь методів prepend, before, after, remove, replaceWith справедливий і для них.