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

Question

当我尝试在不使用 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`

但是，这并没有回答我的问题。

Answer 1

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

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

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