Вставка элемента в DOM после другого
Добавить в избранное
В JavaScript можно вставлять элементы в DOM после других элементов с помощью метода after(). Этот метод принимает в качестве аргумента элемент, который нужно вставить после другого элемента.
Пример 1
Допустим, у нас есть следующий HTML-код:
<h1>Это заголовок</h1>
<p>Это параграф</p>
</div>
Чтобы вставить новый элемент div после элемента h1 в этом HTML-коде, мы можем использовать следующий JavaScript-скрипт:
let newNode = document.createElement('div');
newNode.textContent = 'Это новый элемент';
// Получить опорный узел
let referenceNode = document.querySelector('#container');
// Вставить новый узел после опорного узла
referenceNode.querySelector('h1').after(newNode);
Этот код создаст новый элемент div с текстом "Это новый элемент" и вставит его после элемента h1 в HTML-коде.
Пример 2
Допустим, у нас есть следующий HTML-код:
<li>Элемент 1</li>
<li>Элемент 2</li>
</ul>
Чтобы вставить новый элемент li в конец списка в этом HTML-коде, мы можем использовать следующий JavaScript-скрипт:
let newNode = document.createElement('li');
newNode.textContent = 'Это новый элемент';
// Получить список
let list = document.querySelector('ul');
// Вставить новый элемент в конец списка
list.lastElementChild.after(newNode);
Этот код создаст новый элемент li с текстом "Это новый элемент" и вставит его в конец списка в HTML-коде.
Пример 3
Допустим, у нас есть следующий HTML-код:
<li>Элемент 1</li>
<li>Элемент 2</li>
</ul>
Чтобы вставить новый элемент li после элемента li с текстом "Элемент 2" в этом HTML-коде, мы можем использовать следующий JavaScript-код:
let newNode = document.createElement('li');
newNode.textContent = 'Это новый элемент';
// Получить список
let list = document.querySelector('ul');
// Вставить новый элемент после элемента с текстом "Элемент 2"
list.querySelector('li:contains("Элемент 2")').after(newNode);
Этот код создаст новый элемент li с текстом "Это новый элемент" и вставит его после элемента li с текстом "Элемент 2" в HTML-коде.
Метод after() принимает в качестве аргумента элемент, который нужно вставить после другого элемента. Это означает, что вы должны создать элемент, который хотите вставить, прежде чем использовать метод after().
Метод after() добавляет новый элемент в список дочерних элементов элемента-ссылки. Это означает, что новый элемент будет отображаться после элемента-ссылки в DOM.
Метод after() можно использовать для добавления нового элемента в существующий список или для добавления нового элемента после другого элемента в потоке контента.