Привязывание событий при вставке элементов

Давайте теперь при вставке элементов будем привязывать к ним обработчики событий.

Пусть, к примеру, у нас есть вот такой родительский элемент:

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

Давайте добавим в конец этого родителя еще один абзац, установив ему обработчик клика:

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

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

p.addEventListener('click', function() {
  console.log(this.textContent); // по клику выведем текст абзаца
});

parent.appendChild(p);