Vinculando eventos ao inserir elementos

Agora, ao inserir elementos, vamos vincular handlers de eventos a eles.

Suponha, por exemplo, que temos este elemento pai:

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

Vamos adicionar mais um parágrafo ao final deste elemento pai, definindo um handler de clique para ele:

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

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

p.addEventListener('click', function() {
  console.log(this.textContent); // ao clicar, exibe o texto do parágrafo
});

parent.appendChild(p);