Vinculando eventos ao inserir elementos
Agora, ao inserir elementos, vamos vincular handlers de eventos a eles.
Suponha, por exemplo, que temos este elemento pai:
<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:
let 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);
Dado um ol e um botão. Faça com que ao clicar
no botão, uma tag li seja adicionada ao final da lista ol.
Faça com que ao clicar em qualquer um dos
li adicionados, um ponto de exclamação
seja adicionado ao final de seu texto.