How to create element in javascript

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

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

            <h1> Hello world</h1>

I want create block of elements from javascript like below
<nav class="side-navbar">
       <ul class="list-group">
            <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/>
              <i class="fa fa-refresh" style="font-size:30px;color:yellow"></i>

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