我可以使用 createElement 创建自关闭元素吗？

Question

我试图在body.

现在我有这个：

// Prepend vsr-toggle
var vsrToggle = document.createElement("div");
vsrToggle.innerHTML = "<input type='checkbox' name='sr-toggle' id='srToggle'><label for='srToggle' role='switch'>Screen reader</label>"
document.body.insertBefore(vsrToggle, pageContent);

它工作正常，因为 HTML 被添加到创建的div. 但是，我需要在前面添加此元素而不将其包装在 div 中。

有没有一种方法可以在不先创建元素的情况下添加 HTML？如果没有，我可以将 the 创建input为自关闭元素并将其附加label到它吗？

有更好的方法来实现这一目标吗？

干杯!

Answer 1

使用 document.createDocumentFragment() 创建一个节点，该节点不会自动添加到文档中。然后，您可以向该片段添加元素，最后将其添加到文档中。

这是一个很好的链接：文档片段

如何使用：

var fragment = document.createDocumentFragment();
fragment.innerHTML = '<input />';
document.body.appendChild(fragment);