要素挿入時のイベントバインディング

では、要素を挿入する際に、それらにイベントハンドラをバインドしてみましょう。

例えば、以下のような親要素があるとします：

<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をクリックしても、そのテキストの末尾に感嘆符が追加されるようにしてください。