JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hello"></div>

<br />

<hr />

<br />

<div id="hello2"></div>

CSS

#hello, #hello2 {
    background-color: orange;
    width: 100px;
    height: 100px;
}
span {
    background-color: lightblue;
    font-size: 2em;
}

JavaScript

var d = document.getElementById("hello");
    i = 0;

d.addEventListener("click", function(event) {
    console.log(event);
});

d.addEventListener("mouseover", function (event) {
    console.log(i++);
    d.innerHTML = "<span>HelloBraveNewWorld " + i + "</span>";
});

/* ******************* */

var b = document.getElementById("hello2");
    j = 0;

b.addEventListener("mouseup", function(event) {
    console.log(event);
});

b.addEventListener("mouseover", function (event) {
    console.log(j++);
    b.innerHTML = "<span>HelloBraveNewWorld " + j + "</span>";
});