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

Question

我试图识别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
});

Answer 1

您的问题已经得到了答案：innerHTML将目标文本节点中的内容"原样"替换。因此，如果您不向innerHTML函数提供String，它将显示对您给定的对象应用"toString"的结果。在您的案例中，"a"是一个[object HTMLHeadingElement]。