การสร้างและแทรกองค์ประกอบด้วย JavaScript

ตอนนี้เราจะเรียนรู้วิธีการสร้าง องค์ประกอบ DOM ใหม่ผ่าน JavaScript จากนั้นเพิ่ม พวกมันลงในหน้าเว็บ สำหรับเรื่องนี้มีเมธอด createElement พารามิเตอร์ของเมธอดนี้ ควรระบุชื่อแท็กที่ต้องการ สร้าง

หากบันทึกผลลัพธ์ของ createElement ลงในตัวแปร ในตัวแปรนั้นจะมี องค์ประกอบนั้น ราวกับว่าเราได้มันมา ผ่าน querySelector

ข้อแตกต่างเพียงอย่างเดียว - องค์ประกอบของเราจะไม่ ถูกวางบนหน้าเว็บ และเราสามารถเปลี่ยน ข้อความ แอตทริบิวต์ กำหนดตัวจัดการ เหตุการณ์ และในที่สุดก็วางมันบน หน้าเว็บได้

สำหรับการวางองค์ประกอบใหม่บนหน้าเว็บ ใช้เมธอด appendChild เมธอดนี้ ควรใช้กับองค์ประกอบที่เราต้องการนำ องค์ประกอบของเรา *เข้าไปไว้ข้างใน* และพารามิเตอร์ของเมธอดควรส่งผ่านองค์ประกอบใหม่ของเรา ที่สร้างขึ้นก่อนหน้านี้ผ่าน createElement

มาดูตัวอย่างเชิงปฏิบัติ สมมติว่า เรามี div และในนั้น - มีหลายย่อหน้า:

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

มาสร้างย่อหน้า กำหนดข้อความให้มัน และวางบนหน้าเว็บที่ส่วนท้ายของบล็อก #parent:

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

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

ผลลัพธ์ของการรันโค้ด:

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

กำหนด ol:

<ol id="elem"></ol>

แทรก li ที่มีข้อความ 'item' ต่อท้ายมัน

กำหนด ol และปุ่ม:

<ol id="elem"></ol>
<button id="button">click me</button>

ทำให้เมื่อคลิกที่ปุ่ม มี li ที่มีข้อความ 'item' ถูกเพิ่มต่อท้ายรายการ