Метод append() в JavaScript: вставка элементов

В этом руководстве вы узнаете, как использовать метод JavaScript append() для вставки набора объектов Node или объектов DOMString после последнего дочернего элемента родительского узла.

Метод parentNode.append() вставляет набор объектов Node или объектов DOMString после последнего дочернего элемента родительского узла:

parentNode.append(...nodes);
parentNode.append(...DOMStrings);

Метод append() будет вставлять объекты DOMString как узлы Text.

Обратите внимание, что DOMString — это строка UTF-16, которая напрямую отображается в строку.

Метод append() не имеет возвращаемого значения. Это означает, что метод append() неявно возвращает значение undefined.

Примеры

Давайте рассмотрим несколько примеров использования метода append().

1) Использование для добавления элемента

Предположим, что у вас есть следующий элемент ul :

<ul id="app">
    <li>JavaScript</li>
</ul>

В следующем примере показано, как создать список элементов li и добавить их к элементу ul :

let app = document.querySelector('#app');

let langs = ['TypeScript','HTML','CSS'];

let nodes = langs.map(lang => {
    let li = document.createElement('li');
    li.textContent = lang;
    return li;
});

app.append(...nodes);

Выходной HTML:

<ul id="app">
    <li>JavaScript</li>
    <li>TypeScript</li>
    <li>HTML</li>
    <li>CSS</li>
</ul>

Как это работает:

• Сначала выберите элемент ul по его id с помощью метода querySelector().
• Во-вторых, объявите массив языков.
• В-третьих, для каждого языка создайте новый элемент li с textContent, назначенным языку.
• Наконец, добавьте элементы li к элементу ul, используя метод append().

2) Использование для добавления текста к элементу

Предположим, что у вас есть следующий HTML:

<div id="app"></div>

Вы можете использовать метод append() для добавления текста к элементу:

let app = document.querySelector('#app');
app.append('append() Text Demo');

console.log(app.textContent);

Выходной HTML:

<div id="app">append() Text Demo</div>

Сравнение append() и appendChild()

В таблице приведены различия между append() и appendChild() :