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.