Метод prepend() в JavaScript: добавление элемента в начало

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

Метод prepend() вставляет набор объектов Node или объектов DOMString после первого дочернего элемента родительского узла:

parentNode.prepend(...nodes);

parentNode.prepend(...DOMStrings);

Метод prepend() вставляет объекты DOMString как узлы Text. Обратите внимание, что DOMString — это строка UTF-16, которая напрямую отображается в строку.

Функция возвращает undefined.

Примеры

Давайте рассмотрим несколько примеров использования метода prepend().

1) Использование для добавления элемента

Допустим, у вас есть следующий элемент ul:

<ul id="app">
    <li>HTML</li>
</ul>

В этом примере показано, как создать список элементов li и добавить их в начало элемента ul :

let app = document.querySelector('#app');

let langs = ['CSS','JavaScript','TypeScript'];

let nodes = langs.map(lang => {
    let li = document.createElement('li');
    li.textContent = lang;
    return li;
});

app.prepend(...nodes);

Выходной HTML:

<ul id="app">
    <li>CSS</li>
    <li>JavaScript</li>
    <li>TypeScript</li>
    <li>HTML</li>
</ul>

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

• Сначала выберите элемент ul по его идентификатору с помощью метода querySelector().
• Во-вторых, объявите массив строк.
• В-третьих, для каждого элемента в массиве создайте новый элемент li с textContent, назначенным элементу массива.
• Наконец, добавьте элементы li к родительскому элементу ul, используя метод prepend().

2) Использование метода для добавления текста к элементу

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

<div id="app"></div>

Ниже показано, как использовать метод prepend() для добавления текста к указанному выше элементу div :

let app = document.querySelector('#app');
app.prepend('prepend() Text Demo');

console.log(app.textContent);

Выходной HTML:

<div id="app">prepend() Text Demo</div>