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);

但是，如果在使用headingText创建标题元素之后将document.createElement()附加到标题元素，则会得到[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

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

1 个答案: