JavaScript append() — додати вузли й текст у кінець

Метод append() додає в кінець кілька вузлів або рядків одразу.

правити

Загальний опис

Дві переваги над старим appendChild(), і обидві помітні щодня.

Перша: приймає скільки завгодно аргументів — не треба викликати метод у циклі.

Друга: приймає рядки. Рядок автоматично стає текстовим вузлом, тож createTextNode() більше не потрібен. І — важливо — рядок додається саме як текст: теґи в ньому не стануть розміткою, тож XSS тут неможливий.

Нічого не повертає (на відміну від appendChild(), який віддає доданий вузол).

правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
append	54+	49+	10+	39+	17+	-

Підтримка: мобільні переглядачі

Переглядач
append	54+	yes	yes	10+

Приклади

+ запропонувати свій приклад у пісочниці

<ul id="list"></ul>

const list = document.getElementById('list');

const first = document.createElement('li');
first.textContent = 'Перший';

const second = document.createElement('li');
second.textContent = 'Другий';

// кілька вузлів і рядок — одним викликом
list.append(first, second, 'просто текст');

// рядок стає ТЕКСТОМ, а не розміткою — XSS неможливий
list.append('<b>не жирний</b>');