Метод appendChild()
Примеры element.appendChild()
Добавить элемент в список:
const node = document.createElement("li");
const textnode = document.createTextNode("Вода");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
До:
- Кофе
- Чай
После:
- Кофе
- Чай
- Вода
Переместить элемент из одного списка в другой:
const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);
До:
- Кофе
- Чай
- Вода
- Молоко
После:
- Кофе
- Чай
- Молоко
- Вода
Ещё примеры ниже.
Описание appendChild()
Метод appendChild() добавляет узел (элемент) в качестве последнего дочернего элемента.
Похожи на appendChild()
Методы работы с документами: appendChild()
Синтаксис appendChild()
element.appendChild(node)
или
node.appendChild(node)
Параметры appendChild()
| Параметр | Описание |
|---|---|
| node | Обязательно. Узел для добавления. |
Возвращаемое значение appendChild()
| Тип | Описание |
|---|---|
| Node | Присоединенный узел. |
Ещё примеры appendChild()
Создать параграф с текстом.
- Создать элемент параграфа
- Создать текстовый узел
- Добавить текстовый узел к абзацу
- Добавить параграф к документу.
Создайте элемент <p> и добавьте его к элементу <div>:
const para = document.createElement("p");
const node = document.createTextNode("Это параграф.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);
Попробуйте сами »
Создайте элемент <p> и добавьте его в тело документа:
const para = document.createElement("P");
const node = document.createTextNode("Это параграф.");
para.appendChild(node);
document.body.appendChild(para);
Попробуйте сами »
Поддержка браузера appendChild()
element.appendChild() является функцией DOM уровня 1 (1998).
Он полностью поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 9-11 |