Metoda prepend

Metoda prepend umožňuje vložit na začátek nějakého elementu jiný element. Jako parametr přijímá element, obvykle vytvořený pomocí createElement, nebo řetězec. Je možné přidat několik elementů nebo řetězců najednou, stačí je vyjmenovat čárkou.

Syntaxe

rodič.prepend(prvek nebo řetězec);

Příklad

Vytvořme odstavec, nastavme mu text a umístěme jej na stránku na začátek bloku #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);

Výsledek provedení kódu:

<div id="parent">
	<p>!</p>
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Příklad

Umístěme několik odstavců najednou na začátek bloku #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);

Výsledek provedení kódu:

<div id="parent">
	<p>b</p>
	<p>a</p>
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Příklad

Použijme jako parametr metody řetězec:

<div id="parent">
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

let parent = document.querySelector('#parent');
parent.prepend('!');

Výsledek provedení kódu:

<div id="parent">
	!
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Viz také

metoda append,
který vkládá elementy na konec
metoda appendChild,
který vkládá elementy na konec
metoda insertBefore,
který vkládá element před element
metoda insertAdjacentElement,
který vkládá element na zadané místo
metoda insertAdjacentHTML,
který vkládá tagy na zadané místo