JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM</title>
        
        <!-- assets here -->
    </head>
    <body>
        <div class="container">
            <h3 id="title">Hello World!</h3>
            
            <ul id="list" class="list red">
              <li class="item">HTML</li>
              <li class="item">CSS</li>
              <li class="item">JavaScript</li>
            </ul>
        </div>
    </body>
</html>

CSS

.red{
  color: red;
}

.item{
  font-weight: bold;
}

JavaScript

// let liElements = document.getElementsByTagName('li');
//  console.log(liElements, liElements instanceof HTMLCollection);

document.body.onload=addElement;
 function addElement() {
 //create an element
 let newHead= document.createElement('h1');
 
 // add text
 let newText=document.createTextNode("hello World!!!!");
 
 //insert it into the newly created element
 newHead.appendChild(newText);
 
 let curr=document.getElementById('title');
 document.body.insertBefore(newHead,curr);
 }