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') || isDescendant('target', e.target)) {
    // do something to div with id index
    alert('heyo');
  }
}, false);

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

function isDescendant(parentId, child) {
     var node = child.parentNode;
     var parent = document.getElementById(parentId);
     while (node != null) {
         if (node == parent) {
             return true;
         }
         node = node.parentNode;
     }
     return false;
}