В этом руководстве вы узнаете, как вставить новый узел после существующего в качестве дочернего от родительского узла.
JavaScript DOM предоставляет insertBefore() метод, после которого вы можете добавить новый узел в качестве дочернего элемента. Однако он еще не поддерживает метод insertAfter().
Чтобы вставить новый узел после существующего в качестве дочернего узла, вы можете использовать следующий подход:
- Сначала выберите одноуровневый узел существующего узла.
- Затем выберите родительский узел существующего узла и вызовите метод
insertBefore()на родительском узле, чтобы вставить новый узел перед этим непосредственным одноуровневым узлом.
Следующая функция insertAfter() иллюстрирует логику:
function insertAfter(newNode, existingNode) {
existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}Предположим, что у вас есть следующий список элементов:
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>Следующее вставляет новый узел после последнего элемента списка:
let menu = document.getElementById('menu');
// create a new li node
let li = document.createElement('li');
li.textContent = 'Services';
// insert a new node after the last list item
insertAfter(li, menu.lastElementChild);Как это работает:
- Сначала выберите элемент ul по его идентификатору (меню), используя метод
getElementById(). - Во-вторых, создайте новый элемент списка, используя метод
createElement(). - В-третьих, используйте метод
insertAfter() для вставки элемента списка после последнего элемента.
Соединим все это вместе.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript insertAfter() Demo</title>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<script>
function insertAfter(newNode, existingNode) {
existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}
let menu = document.getElementById('menu');
// create a new li node
let li = document.createElement('li');
li.textContent = 'Services';
insertAfter(li, menu.lastElementChild);
</script>
</body>
</html>После вставки меню выглядит следующим образом:
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
</ul>Заключение
- JavaScript DOM еще не поддерживает метод
insertAfter(). - Используйте метод
insertBefore()и свойствоnextSibling, чтобы вставить новый узел перед существующим в качестве дочернего для родительского узла.