Вставить элемент перед другим
Добавить в избранное
Иногда вам может потребоваться вставить новый HTML-элемент перед уже существующим элементом на веб-странице. Для этой задачи вы можете использовать метод before() в JavaScript. Давайте создадим простой пример и посмотрим, как вставить новый элемент перед существующим.
<div id="some-element">
<p>Я тут изначально</p>
</div>
<script>
// Создать новый элемент
let newNode = document.createElement("div");
newNode.textContent = "Я новый элемент";
// Получить элемент
let referenceNode = document.querySelector("#some-element");
// Вставляем новый элемент перед элементом "Я тут изначально"
referenceNode.before(newNode);
</script>
<p>Я тут изначально</p>
</div>
<script>
// Создать новый элемент
let newNode = document.createElement("div");
newNode.textContent = "Я новый элемент";
// Получить элемент
let referenceNode = document.querySelector("#some-element");
// Вставляем новый элемент перед элементом "Я тут изначально"
referenceNode.before(newNode);
</script>
В этом примере мы создали новый div элемент с текстом "Я новый элемент" и затем использовали метод before(), чтобы вставить его перед существующим элементом p. Как результат, новый элемент будет размещен перед изначальным элементом внутри контейнера some-element.
Таким образом, вы можете легко вставлять новые элементы перед существующими элементами на вашей веб-странице, используя метод before().