JSFiddle - React, Tailwind, and code Playground

by Augustus Yuan

HTML

<ul id="container">
  <li class="hello">1</li>
    <li>2</li>
      <li class="hello">3</li>
        <li>4</li>
</ul>

<button id="add-to-container">
Add
</button>

CSS

li {
  display: block;
  width: 50px;
  height: 50px;
  background: red;
}

JavaScript

var container = document.getElementById('container');

console.log(container);
container.addEventListener('click', function(e) {
  console.log(e);
  if (e.target.classList.contains("hello")) {
    console.log('woo event delegation!');
  }
});

var addButton = document.getElementById('add-to-container');

addButton.addEventListener('click', function(e) {
  var li = document.createElement('li');
  li.classList = "hello";
  li.innerText = "random child"
  container.appendChild(li);
})