Creating a div and inserting HTML

I’m trying to create this in Javascript so that I can insert it into the document:

    <div class="listing-small-badge award-badge" style=" vertical-align: top; position: relative; top: -250px; z-index: 2;"><i class="fa fa-tag award" style="background-color: #990000;"></i>Highest Rated</div>

And I’ve tried everything I can think of, but once I create the ‘i’ element, I can’t seem to properly append it to the div element.

For example:

    <script type="text/javascript">
    var div = document.createElement("div");
    div.style.cssText += 'vertical-align:top; position: relative; top:-250px; z-index:2;';
    div.classList.add("listing-small-badge");
    div.classList.add("award-badge");
    div.innerHTML = "Highest Rated"; //this works on its own, but disappears if/when I try to append the 'i' element/HTML tag
    var i = document.createElement("i");
    i.classList.add("fa");
    i.classList.add("fa-tag");
    i.classList.add("award");
    //i.style.cssText("background-color: #990000;"); //doesn't like this for some reason TBD
    //console.log(i); //prints out just fine
    //div.innerHTML += i; //results in an empty div
    //div.innerHTML += '<i class="test">x</i>'; //results in an empty div
    //div.insertAdjacentHTML("afterend", "<i class='test'></i>"); //results in "The element has no parent."
    console.log(div);
    </script>