如何将一个 HTML 元素插入另一个元素？

Question

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 1

map is a node element, not a string with HTML, so in this case you should use appendChild()

document.getElementById(container).appendChild(map);

Answer 2

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().

Answer 3

If you want to append, use appendChild . If you want to place before a child element, use ChildNode.before If you want to place after a child element, use ChildNode.after