我试图在body的所有子级之前附加一行 HTML。
现在我有这个：
// 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 前面加上？如果没有，是否可以将input创建为自闭合元素并将label附加到其中？
有没有更好的方法来实现这一目标？
干杯！
使用 document.createDocumentFragment(( 创建一个节点，该节点不会自动添加到文档中。然后，您可以将元素添加到此片段，并最终将其添加到文档中。
这是一个很好的链接：文档片段
如何使用：
var fragment = document.createDocumentFragment();
fragment.innerHTML = '<input />';
document.body.appendChild(fragment);
我最终使用createRange和createContextualFragment将字符串转换为可以使用insertBefore进行预置的节点：
// Prepend vsr-toggle
var vsrToggle = document.createRange().createContextualFragment("<input
type='checkbox' name='sr-toggle' id='srToggle'><label for='srToggle'
role='switch'>Screen reader</label>");
document.body.insertBefore(vsrToggle, pageContent);
编辑：正如Poul Bak所示，DOM API中有一个非常有用的功能。单独创建元素(而不是将它们解析为字符串(可以更好地控制添加的元素(例如，您可以直接附加事件侦听器，而无需稍后从 DOM 查询它(，但对于大量元素，它很快就会变得非常冗长。
分别创建每个元素，并使用以下命令将其插入正文内容之前
document.body.insertBefore(newNode, document.body.firstChild);
const vsrToggle = document.createElement("input");
vsrToggle.name="sr-toggle";
vsrToggle.id="srToggle";
vsrToggle.type="checkbox";
const vsrToggleLabel = document.createElement("label");
vsrToggleLabel.setAttribute("for", vsrToggle.id);
vsrToggleLabel.setAttribute("role", "switch");
vsrToggleLabel.textContent = "Screen reader";
document.body.insertBefore(vsrToggle, document.body.firstChild);
document.body.insertBefore(vsrToggleLabel, document.body.firstChild);<body>
<h1>Body headline</h1>
<p>Some random content</p>
</body>