JSFiddle - React, Tailwind, and code Playground

by thai

HTML

<div id="container">This is the container.</div>

CSS

.wrapper {
    color: red;
    font-size: 3em;
}

JavaScript

// fires when gbar is found or added to document.

function gbarHandler(gbar) {
    
    gbar.innerHTML += '!!!!!';
    
}



// first check

(function() {

    var gbar;
    
    if ((gbar = document.getElementById('gbar'))) {
        gbarHandler (gbar);
    }

})();



// create an event handler

document.addEventListener('DOMNodeInserted', function(e) {

    var gbar;
    
    // gbar is what's inserted.
    if (e.target.id == 'gbar') {
        gbarHandler (e.target);
        return;
    }
    
    // gbar is a child of other container.
    if ((gbar = e.target.getElementById('gbar'))) {
        gbarHandler (gbar);
        return;
    }

}, false);




// wait 1 second and add the gbar.

setTimeout (function() {

    var wrapper = document.createElement('div');
    var div = document.createElement('div');
    div.id = 'gbar';
    div.innerHTML = 'THIS IS GBAR!!';
    wrapper.appendChild (div);
    wrapper.className = 'wrapper';
    document.getElementById('container').appendChild (wrapper);

}, 1000);