How to insert one HTML element inside another?

There is a function:

function mapBuilder(container, props) {
    var map = document.createElement('app-map');
    document.getElementById(container).innerHTML += map;
    return map;
}

Using is:

  <div id="map"></div>
     <script src="map.js"></script>
        <script>
            mapBuilder('map', {sidebar: true});
        </script>

Why after execution line document.getElementById(container).innerHTML += map; I get the text [object HTMLElement] on the page instead of real HTML element?

Answer

Check https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML. This method inserts some HTML to a certain place in DOM. You can also use .appendChild().