Binding events on insertion of elements

Now, when inserting elements, let's bind event handlers to them.

Let, for example, we have such a parent element:

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

Let's add another paragraph to the end of this parent by attaching a click handler to it:

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

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

p.addEventListener('click', function() {
	console.log(this.textContent); // displays the text of the paragraph on click
});

parent.appendChild(p);

Given an ol and a button. Make it so that when you click on the button, the tag li is added to the end of ol. Make it so that when you click on any of the added li, an exclamation mark is written to the end of its text.