Javascript appendChild + 创建元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2895318/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
appendChild + createElement
提问by Sarfraz
What's the difference between:
有什么区别：
var div = document.createElement('div');//output -> [object HTMLDivElement]
document.getElementById('container').appendChild(div);
and:
和：
var div = '<div></div>';
document.getElementById('container').appendChild(div);//output -> <div></div>
Shouldn't both be the same? And if not, how do I get the second version to work?
两者不应该是一样的吗？如果没有，我如何让第二个版本工作？
回答by Sarfraz
The latter is simply a string containing HTML while the first is an object. For the first, you need appendChildwhile for the second, you need to append to innerHTML.
后者只是一个包含 HTML 的字符串，而第一个是一个对象。对于第一个，您需要appendChildwhile 对于第二个，您需要附加到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;
回答by strager
With your JS/DOM engine, calling Element.appendChildwith a stringas an argument causes a new Textnode to be created then added.
对于您的 JS/DOM 引擎，Element.appendChild使用 astring作为参数调用会导致Text创建一个新节点，然后添加。
Your first example creates a <div>element. Your second example creates a text node with <div></div>as its contents.
您的第一个示例创建了一个<div>元素。您的第二个示例创建一个文本节点<div></div>作为其内容。
Your second example is equivalent to:
你的第二个例子相当于：
var div = '<div></div>';
document.getElementById('container').appendChild(document.createTextNode(div));//output -> <div></div>
As Sarfraz Ahmed mentioned in his answer, you can make the second example work how you want it to work by writing:
正如Sarfraz Ahmed 在他的回答中提到的，您可以通过编写以下内容来使第二个示例按照您希望的方式工作：
var div = '<div></div>';
document.getElementById('container').innerHTML = div;
回答by dxh
appendChildreally does expect a HTMLDomNode of some kind, such as a HTMLDivElement, and not a string. It doesn't know how to deal with a string. You could do
appendChild确实需要某种类型的 HTMLDomNode，例如 a HTMLDivElement，而不是字符串。它不知道如何处理字符串。你可以做
document.getElementById('container').innerHTML += div;
but I really prefer the first version; and I'd rely more on it to behave the same across browsers.
但我真的更喜欢第一个版本；我更依赖它在浏览器中表现相同。
回答by Dan Heberden
appendChild is expecting an element so when you send it text, it doesn't know what to do. You might want to look into using a javascript library to ease some of that work, such as jQuery. Your code would be:
appendChild 期待一个元素，所以当你给它发送文本时，它不知道该怎么做。您可能想考虑使用 javascript 库来简化其中的一些工作，例如 jQuery。您的代码将是：
$('#container').append('<div></div>');
回答by Sergio
The simplest solution and support all browsers is:
最简单的解决方案并支持所有浏览器是：
var div = '<div></div>';
var parser = new DOMParser();
var myDiv = parser.parseFromString( html, "text/xml" );
Another solution may be:
另一种解决方案可能是：
var div = '<div></div>';
var tmpDiv = document.createElement('div');
tmpDiv.innerHTML = div;
elDiv = tmpDiv.childNodes[0]; //Now it can be used as an element
回答by guest54392850
You can also use these to append/prepend an element to the DOM respectively:
您还可以使用它们分别将元素附加/添加到 DOM：
var elem = document.documentElement.appendChild(document.createElement(element));
var elem = document.documentElement.prepend(document.createElement(element));
and use the elemvariable to target the element (e.g):
并使用elem变量来定位元素（例如）：
elem.style.display = "block";
elem.style.remove();
elem.style.id = ...;
etc.
等等。
