appendChild + createElement

Posted 2023-05-09

【中文标题】appendChild + createElement

【英文标题】：

【发布时间】：2011-02-23 03:08:50

【问题描述】：

两者有什么区别：

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>

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

【参考方案1】：

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

两者不应该相同吗？而如果 不，我如何获得第二个版本 工作吗？

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

【讨论】：

如果您对答案感到满意，则应将其勾选为已接受。请注意，+= 是最接近 append 行为的运算符，而不是 =。

"后面是纯html..."。它只是一个字符串。

第二种情况也可以使用insertAdjacentHTML('beforeend', div)

【参考方案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;

【讨论】：

真的有任何浏览器传递一个字符串参数会导致创建和添加一个新的文本节点吗？在 Firefox 和 chrome 中，这只会导致非法参数异常，并且没有添加任何内容：jsbin.com/omofo3/edit

@David Hedlund，我正在解释发布者所经历的行为。我没有测试任何浏览器（我可能应该有）。你说得对;这似乎是一个例外情况。

【参考方案3】：

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

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

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

【讨论】：

这种方法有什么缺点吗？这就是我通常实现这一目标的方式。

这不是首选，因为它删除了事件侦听器以及先前元素的状态。

【参考方案4】：

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

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

【讨论】：

在输入答案时，so 需要显示“等一下，其他 2 人正在输入答案”消息，哈哈

虽然我认为包含 jquery only 会是开销，但仍然可以说 if OP 已经在使用 jQuery，这很可能是最接近 OP 想要的解决方案，所以我认为这是一个值得的选择，不应该因为其他人已经提供了解决方案而丢失。

【参考方案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

【参考方案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 = ...;

等等