22

有什么区别：

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>

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

4

6 回答 6

32

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

两者不应该相同吗？如果没有，我如何让第二个版本工作？

var div = '<div></div>';
document.getElementById('container').innerHTML += div;
于 2010-05-24T07:11:06.433 回答
10

使用您的 JS/DOM 引擎，Element.appendChild使用 astring作为参数调用会导致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;
于 2010-05-24T07:14:07.663 回答
4

appendChild确实期望某种 HTMLDomNode ，例如 a HTMLDivElement，而不是字符串。它不知道如何处理字符串。你可以做

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

但我真的更喜欢第一个版本；而且我会更多地依靠它在浏览器中表现相同。

于 2010-05-24T07:12:44.030 回答
2

appendChild 期待一个元素，因此当您向其发送文本时，它不知道该做什么。您可能想考虑使用 javascript 库来简化其中的一些工作，例如 jQuery。您的代码将是：

$('#container').append('<div></div>');
于 2010-05-24T07:11:49.833 回答
1

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

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
于 2014-02-07T23:38:34.927 回答
0

您还可以使用它们分别将元素附加/前置到 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 = ...;

等等

于 2018-02-05T14:20:30.870 回答