为什么将新创建的元素插入现有元素会解析 [Object HTMLElement]？答案

【问题标题】：Why does inserting an newly created element to an existing element parses [Object HTMLElement]?为什么将新创建的元素插入现有元素会解析 [Object HTMLElement]？
【发布时间】：2019-10-25 12:10:59
【问题描述】：

当试图在不使用document.createElement() 的情况下为已经存在的元素设置值时，浏览器会显示所需的结果，但是，当我使用document.createElement() 执行此操作时，我得到[Object HTMLElement] 但控制台中没有错误。

例如，以下代码按预期工作：

    const heading = document.querySelector('#heading');
    const headingText = "<em>I am some random text</em>";
    heading.insertAdjacentHTML("beforebegin", headingText);

但是，如果我在使用document.createElement() 创建标题元素后将headingText 附加到标题元素，那么我会得到[Object HTMLElement]，这是出乎意料的。

    const heading = document.querySelector('#heading');
    const headingText = document.createElement('em');
    headingText.textContent = "I am some random text";
    heading.insertAdjacentHTML('beforebegin', headingText);

这是什么原因？

注意：我对解决方案不感兴趣，因为我已经有了解决方案，正如可以看到的，我对导致该问题的原因和原因背后的推理、逻辑感兴趣。谢谢。

我曾尝试在谷歌上搜索答案，但找不到答案。我得到的最接近的是stackoverflow上的这个问题：`insertAdjacentHTML` and `createElement`

但是，这并不能回答我的问题。

【问题讨论】：

标签： javascript dom createelement insertadjacenthtml

【解决方案1】：

insertAdjacentHTML 方法将字符串作为其第二个参数，该参数应该是您要插入的 HTML（如第一个示例所示）。

但是，当您将对象作为第二个参数传递时，它会转换为字符串（在本例中为字符串“[Object HTMLElement]”）并插入到 DOM 中。

另见https://www.w3schools.com/jsref/met_node_insertadjacenthtml.asp

【讨论】：

w3schools 作为参考不太好，一般首选MDN。