How to create element in javascript

function myFunction () {
      
            var element = document.createElement("div");
            element.appendChild(document.createTextNode('hello world inside your div element'));
            document.getElementById('top10').appendChild(element);

        
        
  }
<body onload="myFunction()">
      <div id="top10"></div>

      <div>
            <h1> Hello world</h1>
      </div>


I want create block of elements from javascript like below
<nav class="side-navbar">
       <ul class="list-group">
          <li>
            <a class="item d-flex align-items-center">
              <i class="fa fa-caret-up" style="font-size:48px;color:red"></i>
                <div  class="item d-table-cell">
                  <i class='topbranch'></i><br/>
                  <i class='topjob'></i><br/>
                  <i class='topculprit'></i><br/>
                </div>
              <i class="fa fa-refresh" style="font-size:30px;color:yellow"></i>
            </a>
          </li>
        </ul>
      </nav>

I am able to create single element div and append to the id="top10". I want to create many elements like this from javascript. The structure of elements are shown above. Please help me to create all elements in simple manner