요소 삽입 시 이벤트 바인딩

이제 요소를 삽입할 때 이벤트 핸들러를 바인딩해 봅시다.

예를 들어, 다음과 같은 부모 요소가 있다고 가정해 보겠습니다:

<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과 버튼이 주어졌습니다. 버튼을 클릭하면 ol의 끝에 li 태그가 추가되도록 하세요. 추가된 어떤 li를 클릭해도 그 텍스트 끝에 느낌표가 추가되도록 하세요.