Javascript 为什么在现有元素中插入新创建的元素会解析[Object HtmleElement]？

当尝试在不使用

document.createElement（）

的情况下将值放置到已存在的元素时，浏览器会显示所需的结果，但是，当我使用

document.createElement（）

执行此操作时，我会得到

[Object HTMLElement]

，但控制台中没有错误

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

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

这是什么原因

注意：我对解决方案不感兴趣，因为我已经有了一个解决方案，正如你所看到的，我感兴趣的是原因和原因背后的推理和逻辑。多谢各位

我试着在谷歌上搜索答案，但没能找到答案。我在stackoverflow得到的最接近的问题是：

---

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

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

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

---

另请参见

w3schools作为参考并不太好，通常是首选。

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