我可以使用 createElement 创建自闭合元素吗？答案

【问题标题】：Can I create a self-closing element with createElement?我可以使用 createElement 创建自闭合元素吗？
【发布时间】：2018-10-07 22:53:32
【问题描述】：

我试图在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 附加到它吗？

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

干杯！

【问题讨论】：

使用insertBefore()插入<input>，然后再次调用它插入<label>。自动关闭与此无关。
php dom create element but self-closing的可能重复

标签： javascript html prepend createelement

【解决方案1】：

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

这是一个很好的链接：Document fragment

如何使用：

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

【讨论】：

不知道这个非常有用的功能，谢谢分享！
这就是我登陆的地方......请参阅下面的答案。多个元素不需要createRange 吗？否则，您必须继续致电createDocumentFragment。
您根据需要将元素添加到片段中，创建元素树，然后最后将片段添加到文档中。

【解决方案2】：

我最终使用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);

【讨论】：

【解决方案3】：

编辑：正如 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>

【讨论】：