注意:我不想想要使用任何框架。
<小时/>目标只是创建一个函数，该函数将返回基于 HTML 字符串的元素。
假设有一个简单的 HTML 文档，如下所示:
<html>
<head></head>
<body>
</body>
</html>
提到的所有函数都包含在 head 部分中，所有 DOM 创建/操作都在脚本标记中的正文末尾完成。
<小时/>我有一个 createElement 函数，它采用格式良好的 HTML 字符串作为参数。事情是这样的:
function createElement(str)
{
var div = document.createElement('div');
div.innerHTML = str;
return div.childNodes;
}
现在，当您像这样调用它时，该函数会非常有效:
var e = createElement('<p id="myId" class="myClass">myInnerHTML</p>');
由于创建的元素不是“真正”元素，因此存在一个小(可能是巨大)问题，它的父节点仍然是“div”。如果有人知道如何解决这个问题，那就太棒了。
<小时/>现在，如果我使用更复杂的字符串调用相同的函数:
var e = createElement('<p id="myId" class="myClass">innerHTML<h2 id="h2ID" class="h2CLASS">Heading2</h2></p>');
它会创建两个子项，而不是一个子项，另一个子项又包含另一个子项。
一旦您执行 div.innerHTML = str.用innerHTML代替
`<p id="myId" class="myClass">innerHTML <h2 id="h2ID" class="h2CLASS">Heading2</h2> </p>`
转向
`<p id="myId" class="myClass">innerHTML</p> <h2 id="h2ID" class="h2CLASS">Heading2</h2>`
- 使用 .innerHTML 后我可以以某种方式获取没有父节点的元素吗？
- 我可以(在稍微复杂的字符串的情况下)让我的函数返回一个带有适当子元素的元素而不是两个元素。 [它实际上返回三个，
<p.myClass#myId>,<h2.h2CLASS#h2ID>，还有另一个<p>]
最佳答案
这与 palswim 的答案类似，只是它不关心创建克隆，而是使用 while() 循环，始终附加节点位于 [0]。
function createElement( str ) {
var frag = document.createDocumentFragment();
var elem = document.createElement('div');
elem.innerHTML = str;
while (elem.childNodes[0]) {
frag.appendChild(elem.childNodes[0]);
}
return frag;
}
关于javascript - 如何正确使用innerHTML从html字符串创建一个元素(可能有子元素)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3662821/