JSFiddle - React, Tailwind, and code Playground

by Ram Patra

HTML

<div class="test">Test
    <div class="bu">Bu</div>test</div>

CSS

.test, .bu, .tu {
    border: 1px solid gray;
    padding: 10px;
    margin: 10px;
}

JavaScript

function hasClass(elem, className) {
    return elem.className.split(' ').indexOf(className) > -1;
}

document.addEventListener('click', function (e) {
    if (hasClass(e.target, 'bu')) {
        alert('bu');
        document.querySelector('.bu').innerHTML = '<div class="bu">Bu<div class="tu">Tu</div></div>';
    } else if (hasClass(e.target, 'test')) {
        alert('test');
    } else if (hasClass(e.target, 'tu')) {
        alert('tu');
    }

}, false);