Element.append()

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

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

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

Синтаксис

js

append(...nodesOrDOMStrings)

Аргументы

nodesOrDOMStrings

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

Исключения

HierarchyRequestError DOMException (en-US)

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

Примеры

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

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

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