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作为参数调用string会导致创建新的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;

但我真的更喜欢第一个版本;并且我更依赖它来在浏览器中表现相同。

Answer 4

appendChild期待一个元素，所以当你发送文本时，它不知道该怎么做。您可能希望使用javascript库来简化某些工作，例如jQuery。你的代码是：

$('#container').append('<div></div>');

Answer 5

最简单的解决方案并支持所有浏览器：

var div = '<div></div>';
var parser = new DOMParser();
var myDiv = parser.parseFromString( html, "text/xml" );

另一种解决方案可能是：

var div = '<div></div>';
var tmpDiv = document.createElement('div');
    tmpDiv.innerHTML = div;

    elDiv = tmpDiv.childNodes[0]; //Now it can be used as an element

Answer 6

您也可以使用它们分别将元素附加/添加到DOM：

var elem = document.documentElement.appendChild(document.createElement(element));
var elem = document.documentElement.prepend(document.createElement(element));

并使用elem变量来定位元素（例如）：

elem.style.display = "block";
elem.style.remove();
elem.style.id = ...;

等

appendChild + createElement

6 个答案: