В этом руководстве вы узнаете, как использовать метод appendChild() в JavaScript для добавления элемента в конец списка дочерних узлов указанного родительского узла.
appendChild() — это метод интерфейса Node. Функция позволяет добавить элемент в конец списка дочерних узлов указанного родительского узла.
Синтаксис:
parentNode.appendChild(childNode);
В этом методе childNode узел является добавляемым к данному родительскому узлу. appendChild() возвращает добавленный дочерний элемент.
Если childNode является ссылкой на существующий узел в документе, метод appendChild() перемещает childNode из его текущей позиции в новую позицию.
Примеры
Давайте рассмотрим несколько примеров использования appendChild().
1) Простой пример
Предположим, у вас есть следующая разметка HTML:
<ul id="menu"> </ul>
В следующем примере метод appendChild() используется для добавления трех элементов списка в элемент <ul> :
function createMenuItem(name) {
let li = document.createElement('li');
li.textContent = name;
return li;
}
// get the ul#menu
const menu = document.querySelector('#menu');
// add menu item
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));
Как это работает:
- Во-первых,
createMenuItem()создает новый элемент списка с указанным именем с помощью методаcreateElement(). - Во-вторых, выберите элемент
<ul>сmenuid, используя методquerySelector(). - В-третьих, вызовите
createMenuItem(), чтобы создать новый пункт меню, и используйте методappendChild(), чтобы добавить пункт меню к элементу<ul>.
Выход:
<ul id="menu">
<li>Home</li>
<li>Services</li>
<li>About Us</li>
</ul>Соединим все это вместе:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript appendChild() Demo</title>
</head>
<body>
<ul id="menu">
</ul>
<script>
function createMenuItem(name) {
let li = document.createElement('li');
li.textContent = name;
return li;
}
// get the ul#menu
const menu = document.querySelector('#menu');
// add menu item
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));
</script>
</body>
</html>2) Перемещение узла в документе
Предположим, что у вас есть два списка элементов:
<ul id="first-list">
<li>Everest</li>
<li>Fuji</li>
<li>Kilimanjaro</li>
</ul>
<ul id="second-list">
<li>Karakoram Range</li>
<li>Denali</li>
<li>Mont Blanc</li>
</ul>
В следующем примере appendChild() используется для перемещения первого дочернего элемента из первого списка во второй список:
// get the first list
const firstList = document.querySelector('#first-list');
// take the first child element
const everest = firstList.firstElementChild;
// get the second list
const secondList = document.querySelector('#second-list');
// append the everest to the second list
secondList.appendChild(everest)
Как это работает:
- Сначала выберите первый элемент по его идентификатору (
first-list), используя методquerySelector(). - Во-вторых, выберите первый дочерний элемент из первого списка.
- В-третьих, выберите второй элемент по его идентификатору (
second-list), используя методquerySelector(). - Наконец, добавьте первый дочерний элемент из первого списка во второй список, используя метод
appendChild().
Вот список до и после перемещения:
Заключение
- Используйте
appendChild(), чтобы добавить узел в конец списка дочерних узлов указанного родительского узла. appendChild()можно использовать для перемещения существующего дочернего узла в новую позицию в документе.