开发者问题收集

appendChild + createElement

2010-05-24
91900

642723875

和 236619769

这两者之间有什么区别?两者不应该是一样的吗?如果不是,我该如何让第二个版本正常工作?

3个回答

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

shouldn't both be the same? and if not, how do i get the 2nd version to work?

var div = '<div></div>';
document.getElementById('container').innerHTML += div;
Sarfraz
2010-05-24

使用 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 在他的回答中提到的 ,您可以通过编写以下内容使第二个示例按您希望的方式工作:

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

document.getElementById('container').innerHTML = div;
strager
2010-05-24

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

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

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

David Hedlund
2010-05-24