Element.append()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Метод Element.append() вставляет узлы или строки с текстом в конец Element. Строки с текстом вставляются как текстовое содержимое.

Отличия от метода Node.appendChild():

  • Метод Element.append() позволяет вставлять строки с текстом, в то время как Node.appendChild() работает только с узлами.
  • При вызове метод Element.append() ничего не возвращает, в то время как Node.appendChild() возвращает вставленный узел.
  • С помощью Element.append() можно вставить сразу несколько узлов или строк текста, в то время как Node.appendChild() умеет вставлять по одной сущности за раз.

Синтаксис

js
append(...nodesOrDOMStrings);

Аргументы

nodesOrDOMStrings

Один или несколько узлов или строк с текстом, которые необходимо вставить.

Исключения

HierarchyRequestError DOMException

Случается, когда узел не может быть вставлен в существующую иерархию элементов.

Примеры

Вставка элемента

js
let div = document.createElement("div");
let p = document.createElement("p");
div.append(p);

console.log(div.childNodes); // NodeList [ <p> ]

Вставка текста

js
let div = document.createElement("div");
div.append("Какой-то текст");

console.log(div.textContent); // "Какой-то текст"

Вставка и текста, и элемента сразу

js
let div = document.createElement("div");
let p = document.createElement("p");
div.append("Какой-то текст", p);

console.log(div.childNodes); // NodeList [ #text "Какой-то текст", <p> ]

Область видимости метода нерасширяема

Метод append() не работает с оператором with. Подробнее читайте в справке по Symbol.unscopables.

js
let div = document.createElement("div");

with (div) {
  append("foo");
}
// ReferenceError: append is not defined

Спецификации

Specification
DOM Standard
# ref-for-dom-parentnode-append①

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также