时间戳

首页 > 解决方案 > 在这种情况下，innerhtml 和 appendChild 之间的区别

javascript - 在这种情况下，innerhtml 和 appendChild 之间的区别

问题描述

我试图识别innerHTML 和appendChild 之间的区别。我知道 innerHTML 会清除当前节点的内容并用新内容替换它并重新解析它。但是，我看到结果不符合我的期望。怎么会这样？（我正在使用谷歌浏览器）

window.addEventListener("load", function() {
var a = document.createElement("h1");
var b = document.createTextNode("Hello World");
a.appendChild(b);
document.getElementById("1").innerHTML = a; //result = [object HTMLHeadingElement]

var c = "<h1>HEllo WORLD</h1>";
document.getElementById("2").innerHTML = c ; //result = Hello World
});

标签： javascripthtml

解决方案

您的问题有答案：innerHTML 在目标文本节点中“按原样”替换内容。因此，如果您不向 innerHTML 函数提供字符串，它将显示“toString”应用于您提供的对象的结果。在您的情况下，“a”是一个 [object HTMLHeadingElement]。

推荐阅读