Метод prepend в JavaScript

Метод prepend позволяет вставить в начало какого-либо элемента другой элемент. Параметром метод принимает элемент, как правило созданный через createElement, либо строку. Можно добавить сразу несколько элементов или строк, перечислив их через запятую.

Синтаксис

родитель.prepend(элемент или строка)

Пример

Давайте создадим абзац, установим ему текст и поместим на страницу в начало блока #parent:

<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
let p = document.createElement('p');
p.innerHTML = '!';
parent.prepend(p);
// <div id="parent">
// <p>!</p>
// <p>1</p>
// <p>2</p>
// <p>3</p>
// </div>

Пример

Поместим сразу несколько абзацев в начало блока #parent:

<div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
let p1 = document.createElement('p');
p1.innerHTML = 'a';
let p2 = document.createElement('p');
p2.innerHTML = 'b';
parent.prepend(p1, p2);
// <div id="parent">
// <p>b</p>
// <p>a</p>
// <p>1</p>
// <p>2</p>
// <p>3</p>
// </div>

Пример

Давайте в качестве параметра метода используем строку:

div id="parent">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
let parent = document.querySelector('#parent');
parent.prepend('!');
// <div id="parent">
// !
// <p>1</p>
// <p>2</p>
// <p>3</p>
// </div>