JSFiddle - React, Tailwind, and code Playground

HTML

<div id='outer'>

</div>

CSS

#target {
  border: 1px solid;
  background-color: red;
}

JavaScript

var div = document.createElement('div');
div.id = 'target';

var h1 = document.createElement('h1');
h1.innerHTML = 'This is a title inside the div that is not clickable';

div.appendChild(h1);

document.getElementById('outer').appendChild(div);

document.addEventListener('click', function (e) {
  if (hasId(e.target, 'target')) {
    // do something to div with id index
    alert('heyo');
  }
}, false);

function hasId(elem, id) {
  return elem.id == id;
}