prepend მეთოდი

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,
რომელიც ჩასვამს ტეგებს მითითებულ ადგილას