Метод insertBefore() в JavaScript: вставка нового элемента

В этом руководстве вы узнаете, как использовать JavaScript insertBefore() для вставки элемента перед другим узлом в качестве дочернего указанного родительского узла.

Чтобы вставить узел перед другим узлом в качестве дочернего узла родительского узла, используйте метод parentNode.insertBefore() :

parentNode.insertBefore(newNode, existingNode);

В этом методе:

• newNode — это новый вставляемый узел.
• existingNode узел — это узел, перед которым вставляется новый узел. Если existingNode имеет значение null, метод insertBefore() вставляет newNode в конец дочерних узлов parentNode.

Метод insertBefore() возвращает вставленный дочерний узел.

Вспомогательная функция

Следующий примерinsertBefore() вставляет новый узел перед указанным узлом:

function insertBefore(newNode, existingNode) {
    existingNode.parentNode.insertBefore(newNode, existingNode);
}

Предположим, что у вас есть следующий список элементов:

<ul id="menu">
    <li>Services</li>   
    <li>About</li>
    <li>Contact</li>
</ul>

В следующем примере используется метод insertBefore() для вставки нового узла в качестве первого элемента списка:

let menu = document.getElementById('menu');
// create a new li node
let li = document.createElement('li');
li.textContent = 'Home';

// insert a new node before the first list item
menu.insertBefore(li, menu.firstElementChild);

Как это работает.

• Сначала получите элемент menu с помощью метода getElementById().
• Во-вторых, создайте новый элемент списка, используя метод createElement().
• В-третьих, вставьте элемент списка перед первым дочерним элементом элемента menu, используя метод insertBefore().