Метод HTML DOM Element appendChild()

Определение и использование

appendChild() Метод добавляет узел (элемент) в качестве последнего подэлемента к элементу.

См. также:

Метод insertBefore()

Метод replaceChild()

Метод removeChild()

Метод remove()

Атрибут childNodes

Атрибут firstChild

Атрибут lastChild

Атрибут firstElementChild

Атрибут lastElementChild

Связанные документные методы:

Метод createElement()

Метод createTextNode()

Пример

Пример 1

Добавление элементов в список:

const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

До добавления:

  • Кофе
  • Чай

После добавления:

  • Кофе
  • Чай
  • Вода

Попробуйте сами

Пример 2

Перемещение элементов списка из одного списка в другой:

const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);

До перемещения:

  • Кофе
  • Чай

  • Вода
  • Молоко

После перемещения:

  • Кофе
  • Чай
  • Молоко

  • Вода

Попробуйте сами

Пример 3

Создать абзац с текстом:

  • Создать элемент абзаца
  • Создать текстовый узел
  • Добавить текстовый узел в абзац
  • Добавить абзац в документ

Создайте элемент <p> и добавьте его в элемент <div>:

const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);

Попробуйте сами

Пример 4

Создайте элемент <p> и добавьте его в正文 документа:

const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);

Попробуйте сами

Грамматика

element.appendChild(node)

или

node.appendChild(node)

Параметр

Параметр Описание
node Обязателен. Узел для добавления.

Возвратное значение

Тип Описание
узел добавленный узел.

Поддержка браузеров

element.appendChild() Это функция DOM Level 1 (1998).

Все браузеры полностью поддерживают его:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка