Create div from javascript, add a div to a div programmatically

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
    <style>
        .mydivouter {
    position: relative;
  }

  .mydivoverlap {
    position: relative;
    z-index: 1;
  }

  .mybuttonoverlap {
    position: absolute;
    z-index: 2;
    top: -14px;
    display: none;
    left: 50px;
  }

  .mybuttonoverlap2 {
    position: absolute;
    z-index: 1;
    top: 14px;
    display: none;
    left: 50px;
  }

  .mydivouter:hover .mybuttonoverlap {
    display: block;
  }

  .mydivouter:hover .mybuttonoverlap2 {
    display: block;
  }

  .ace_gutter-cell:hover  {
    color:red;
    display: block;
  }


  body{
   // background-color: blue;
   // color:yellow;
  }

      .ace-gutter-cell {
        background-color: lime;
        width: 150px;
        height: 150px;
      }

      .mydiv {
         position: relative;
        display: none;
        background-color: salmon;
        color: white;
      }

      body{
        background-color:yellow;
      }
</style>
  </head>

  <body>

     
    <h1>Create a div from Plain JavaScript</h1>
    a test for Ace Editor<br>
    i want to add a div to linenumber gutter in ace editor<br>
    a div for popup navigation buttons up or down<br>
    Easy JumpScroll to previous or next marked line<br>
    <a href="https://run.plnkr.co/plunks/ZEkhoGgs4ntDZzT0/" target="new">https://run.plnkr.co/plunks/ZEkhoGgs4ntDZzT0/</a><br>
    <br><br>
    previous test https://plnkr.co/plunk/26pHZDFjoE17QrCz<br>
<br>
    <div id="gutter" style="background:orange;" class="gutter">
      <h3>gutter div line numbers class array</h3>
      </div>


<script>
// https://stackoverflow.com/questions/6840326/how-can-i-create-and-style-a-div-using-javascript
var div = document.createElement('div');

div.innerHTML = `
added a div => 
<large>my <b>new</b> 
skill - 
DOM maniuplation!</large><br>
<br>
<input type="button" value="Button">
<input type="color">
<input type="date">
<input type="time">
<br><br>
<div class="mydivouter">
 <h2> line 33 &nbsp;-------mouseover this ------- line 33</h2>
<button type="button" title="scrollup
    to previous marked line" onclick="goup()" class="mybuttonoverlap btn btn-info">&#11165;</button>
  <button type="button" title="scrolldown
    to next marked line" onclick="godown()" class="mybuttonoverlap2 btn btn-info">&#11167;</button>
</div>
<br>  
 <p id="textout"><b><i>waiting for button input from button popup hoover line 33 buttons here</i></b></p>
 4 Easy JumpScroll up or down 2 marked LineNumbers in Ace Editor<br>
 each marked line should popup buttons on mouseover<br>
 for easy navigation to prvious or next marked line<br>
 Autocreate Marked LineNumbers from Option CheckList<br>
 like style, body, script, function, eventlisteners, 
 <br>
 <br>
 <h1>
 <center> <a href="https://run.plnkr.co/plunks/ZEkhoGgs4ntDZzT0/" target="new">Electric Storm</a><br></center>
 </h1>
`;

// set style
div.style.color = 'red';
div.style.background ="lightblue";
div.style.padding ="30px";
div.style.margin ="100px";
div.style.border = "solid";
// better to use CSS though - just set class
div.setAttribute('id','test'); // and make sure myclass has some styles in css
div.setAttribute('class', 'myclass');
// results in 
//<div id="test" class="myclass" style="color: red; background: lightblue; padding: 30px; margin: 100px;">added div =&gt; <large>my <b>new</b> skill - <large>DOM maniuplation!</large></large></div>
//document.body.appendChild(div);
//document.getElementsByTagName("body")[0].appendChild(divElement);
//document.getElementsById("gutter").appendChild(divElement);
document.getElementsByClassName("gutter")[0].appendChild(div);  // only adds the div to gutter linennuber 0

//document.getElementById("gutter").appendChild(divElement);
</script>





<script>
function goup(){
     document.getElementById("textout").innerHTML="go up pressed";
}
function godown(){
   document.getElementById("textout").innerHTML="go down pressed";
}


const el = document.getElementsByClassName('ace_gutter-cell');

const hiddenDiv = document.getElementById('mydiv');

// ✅ Show hidden DIV on hover
el[0].addEventListener('mouseover', function handleMouseOver() {
  hiddenDiv.style.display = 'block';

  // 👇️ if you used visibility property to hide div
  // hiddenDiv.style.visibility = 'visible';
});

// ✅ (optionally) Hide DIV on mouse out
el[0].addEventListener('mouseout', function handleMouseOut() {
  hiddenDiv.style.display = 'none';

  // 👇️ if you used visibility property to hide div
  // hiddenDiv.style.visibility = 'hidden';
});
</script>
<br><br>
<iframe width="100%" height="600" src="https://www.youtube.com/embed/eC0tJmIl_lY"></iframe>
  </body>
</html>

/* Add your styles here */

// Add your code here