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引擎,Element.appendChild使用a string作为参数调用会导致Text创建新节点然后添加.

您的第一个示例创建一个<div>元素.您的第二个示例创建一个文本节点<div></div>作为其内容.

你的第二个例子相当于:

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

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

正如Sarfraz Ahmed在他的回答中提到的那样,你可以通过编写第二个例子来实现你希望它如何工作:

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

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