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

我试图识别innerHTML和appendChild之间的区别。 我知道innerHTML清除了当前节点的内容，并用新内容替换它，使其重新解析。然而，我看到结果并没有达到我的预期。怎么会这样？（我正在使用谷歌浏览器）

window.addEventListener（“加载”，函数（）{
var a=document.createElement（“h1”）；
var b=document.createTextNode（“Hello World”）；
a、 儿童（b）；
document.getElementById（“1”）.innerHTML=a；//结果=[object HTMLHeadingElement]
var c=“你好世界”；
document.getElementById（“2”）.innerHTML=c；//结果=Hello World
});

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

什么不符合您的期望？ID为

1

和

2

的元素在哪里？？

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