วิธี prepend

วิธี prepend ช่วยให้สามารถแทรกองค์ประกอบอื่นที่ต้นขององค์ประกอบใดๆ พารามิเตอร์ของเมธอดรับองค์ประกอบ ซึ่งมักสร้างผ่าน createElement หรือสตริง สามารถเพิ่มหลายองค์ประกอบหรือสตริงพร้อมกันได้ โดยระบุคั่นด้วยเครื่องหมายจุลภาค

ไวยากรณ์

parent.prepend(element หรือ string);

ตัวอย่าง

มาสร้างย่อหน้า ตั้งค่าข้อความให้มัน และวางบนหน้าเว็บที่ต้นบล็อก #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,
ซึ่งแทรกแท็กในตำแหน่งที่กำหนด