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

Question

有一个function：

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

使用的是：

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

为什么执行行后document.getElementById(container).innerHTML += map; 我在页面上得到文本[object HTMLElement]而不是真正的 HTML 元素？

Answer 1

map 是一个节点元素，而不是带有 HTML 的字符串，所以在这种情况下你应该使用appendChild()

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

Answer 2

检查https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML 。 此方法将一些 HTML 插入到 DOM 中的某个位置。 你也可以使用.appendChild()。

Answer 3

如果要 append，请使用appendChild 。 如果要放置在子元素之前，请使用ChildNode.before如果要放置在子元素之后，请使用ChildNode.after