Dynamic binding of new elements in a list

dynamicBinding.js

//Dynamic binding of new elements in a list

// HTML code in using .pug template
//ul.items
//  li Static Item
//button#addItem Add Item

const items = document.querySelector( ".items" );

let counter = 0;

document.getElementById( "addItem" ).addEventListener( "click", () => {

  counter++;
  const item = document.createElement( "li" );
  item.textContent = `Dynamic Item ${ counter }`;
  items.appendChild( item );

} );

document.querySelector( ".items" ).addEventListener( "click", e => {
  
  alert( e.target.textContent );

} );