appendChild + createElement

Question

这两者有什么不同：

var div = document.createElement('div');//output -> [object HTMLDivElement]

document.getElementById('container').appendChild(div);

和：

var div = '<div></div>';

document.getElementById('container').appendChild(div);//output -> <div></div>

两者不应该是一样的吗？如果不是，我如何让第二个版本工作？

Answer 1

后者只是一个包含HTML的字符串，而第一个是一个对象。对于第一个，您需要appendChild，而对于第二个，您需要附加到innerHTML。

不应该是相同的吗？如果不是，我怎么让第二个版本工作呢？

var div = '<div></div>';
document.getElementById('container').innerHTML += div;

Answer 2

使用JS/DOM引擎，使用string作为参数调用Element.appendChild会创建一个新的Text节点，然后添加。

第一个示例创建一个<div>元素。第二个示例创建了一个内容为<div></div>的文本节点。

您的第二个示例相当于：

var div = '<div></div>';

document.getElementById('container').appendChild(document.createTextNode(div));//output -> <div></div>

作为Sarfraz Ahmed mentioned in his answer，您可以通过编写以下代码来使第二个示例按照您希望的方式工作：

var div = '<div></div>';

document.getElementById('container').innerHTML = div;

Answer 3

appendChild确实需要某种类型的HTMLDomNode，比如HTMLDivElement，而不是字符串。它不知道如何处理字符串。你可以这样做

document.getElementById('container').innerHTML += div;

但我真的更喜欢第一个版本；我更依赖于它来在不同的浏览器上表现出相同的行为。