Javascript 我可以用createElement创建一个自动关闭元素吗？

我试图在

正文

的所有子项之前附加一行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);

//前置vsr切换
var vsrToggle=document.createElement（“div”）；
vsrToggle.innerHTML=“屏幕阅读器”
document.body.insertBefore（vsrToggle，pageContent）；

它工作正常，因为HTML被添加到创建的

div

。但是，我需要在不将该元素包装在div中的情况下预先编写该元素

有没有一种方法可以在不首先创建元素的情况下预先编写HTML？如果没有，我是否可以创建

输入

作为自动关闭元素，并将

标签

附加到它

有没有更好的方法来实现这一点

---

干杯

最后，我使用

createRange

和

createContextalFragment

将字符串转换为一个节点，我可以使用

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);

//前置vsr切换
var vsrToggle=document.createRange（）.createContextualFragment（“屏幕阅读器”）；
document.body.insertBefore（vsrToggle，pageContent）；

编辑：正如Poul Bak所示，DOM API中有一个非常有用的特性。单独创建元素（而不是将它们解析为字符串）可以更好地控制添加的元素（例如，您可以直接附加事件侦听器，而无需稍后从DOM查询），但对于大量元素，它很快就会变得非常冗长

分别创建每个元素，并使用

document.body.insertBefore(newNode, document.body.firstChild);

const vsrToggle=document.createElement（“输入”）；
vsrToggle.name=“sr toggle”；
vsrToggle.id=“srToggle”；
vsrToggle.type=“复选框”；
const vsrToggleLabel=document.createElement（“标签”）；
vsrToggleLabel.setAttribute（“for”，vsrToggle.id）；
setAttribute（“角色”、“开关”）；
vsrtoggelabel.textContent=“屏幕阅读器”；
document.body.insertBefore（vsrtogle，document.body.firstChild）；
document.body.insertBefore（vsrtoggelabel，document.body.firstChild）

正文标题
一些随机内容

使用document.createDocumentFragment（）创建一个不会自动添加到文档中的节点。然后可以将元素添加到此片段，最后将其添加到文档中

这是一个很好的链接：

如何使用：

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

var fragment=document.createDocumentFragment（）；
fragment.innerHTML=''；
document.body.appendChild（片段）；
使用
insertBefore（）
插入
，然后再次调用它插入
。自动关闭与此无关。的可能副本不知道此非常有用的功能，谢谢分享！那就是我降落的地方。。。见下面我的答案。多个元素不需要
createRange
？否则，您必须继续调用
createDocumentFragment
。根据需要向片段中添加元素，创建元素树，然后最终将片段添加到文档中。