如何正确插入HTML元素？insertAdjacentHTML插入节点显示对象异常

insertAdjacentHTML 方法的第二个参数仅接收HTML字符串格式的内容，你传入的title是cloneNode(true)返回的真实DOM节点对象，不属于字符串类型。代码执行时JS会自动将DOM对象强制转换为字符串，最终得到[object HTMLHeadingElement]这类对象类型文本插入到容器中，自然无法渲染出预期的h1元素。

根据使用场景选任意一种方案即可：

• 方案1：改用专门插入DOM节点的insertAdjacentElement方法，该方法第二个参数原生支持传入DOM元素对象

const CONTAINER = document.getElementById('container');
let title = document.querySelector('h1').cloneNode(true);
CONTAINER.insertAdjacentElement('beforeend', title);

• 方案2：如果要继续使用insertAdjacentHTML，需要先把DOM节点转为对应的HTML字符串，取节点的outerHTML属性即可

const CONTAINER = document.getElementById('container');
let title = document.querySelector('h1').cloneNode(true);
CONTAINER.insertAdjacentHTML('beforeend', title.outerHTML);

• 方案3：直接使用更简洁的append方法插入DOM节点

const CONTAINER = document.getElementById('container');
let title = document.querySelector('h1').cloneNode(true);
CONTAINER.append(title);

内容的提问来源于stack exchange，提问作者Vince