Метод 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.textContent = '!';
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.textContent = 'a';
let p2 = document.createElement('p');
p2.textContent = '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>
Смотрите также
-
метод
append,
который вставляет элементы в конец -
метод
appendChild,
который вставляет элементы в конец -
метод
insertBefore,
который вставляет элемент перед элементом -
метод
insertAdjacentElement,
который вставляет элемент в заданное место -
метод
insertAdjacentHTML,
который вставляет теги в заданное место