การผูกเหตุการณ์เมื่อแทรกองค์ประกอบ

ตอนนี้เมื่อแทรกองค์ประกอบ เรามา ผูกตัวจัดการเหตุการณ์ให้กับองค์ประกอบเหล่านั้นกัน

ตัวอย่างเช่น สมมติว่าเรามีองค์ประกอบแม่แบบนี้:

<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 = '!';

p.addEventListener('click', function() {
	console.log(this.textContent); // เมื่อคลิกจะแสดงข้อความของย่อหน้า
});

parent.appendChild(p);

ให้มี ol และปุ่ม จงทำให้เมื่อคลิก ที่ปุ่มแล้วจะเพิ่มแท็ก li ไปที่ท้ายของ ol และทำให้เมื่อคลิกที่ li ใดๆ ที่เพิ่มเข้ามา เครื่องหมายอัศเจรีย์จะถูกเพิ่ม ไปที่ท้ายข้อความของมัน