Вставка элемента в DOM после другого

В JavaScript можно вставлять элементы в DOM после других элементов с помощью метода after(). Этот метод принимает в качестве аргумента элемент, который нужно вставить после другого элемента.

Пример 1

Допустим, у нас есть следующий HTML-код:

<div id="container">
<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-код:

<ul>
<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-код:

<ul>
<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() можно использовать для добавления нового элемента в существующий список или для добавления нового элемента после другого элемента в потоке контента.

Обсуждение закрыто.