1

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

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

4

1 回答 1

2

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

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

另请参阅https://www.w3schools.com/jsref/met_node_insertadjacenthtml.asp

于 2019-06-11T06:11:56.477 回答