JSFiddle - React, Tailwind, and code Playground

by moojjoo

HTML

<div id="divv" title="asda"></div>
<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>
<div id="div3">DIV 3</div>
<div id="div4">DIV 4</div>
<div id="div5">DIV 5</div>

JavaScript

var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

div2.onmouseenter = mouseOverFunc2;
div2.onmouseleave = mouseOutFunc2;

div3.onmouseenter = mouseOverFunc3;
div3.onmouseleave = mouseOutFunc3;

function mouseOverFunc2() {
  {
    var newDiv = document.createElement("span");
    newDiv.setAttribute("id", "id_span");
    newDiv.innerText = " -- click me!";
    div2.appendChild(newDiv);
    console.log(div2);
  }
}

function mouseOverFunc3() {
  {
    var newDiv = document.createElement("span");
    newDiv.setAttribute("id", "id_span");
    newDiv.innerText = " -- click me!";
    div3.appendChild(newDiv);
    console.log(div1);
  }
}

function mouseOutFunc2() {
  var node = document.getElementById("id_span");
  if (node.parentNode) {
    node.parentNode.removeChild(node);
  }
}

function mouseOutFunc3() {
  var node = document.getElementById("id_span");
  if (node.parentNode) {
    node.parentNode.removeChild(node);
  }
}