我可以使用 createElement 创建一个自闭合元素吗？

Question

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

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

干杯！

Answer 1

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

Answer 2

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

Answer 3

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

这个不错link:Document fragment

使用方法:

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

我可以使用 createElement 创建一个自闭合元素吗？

Can I create a self-closing element with createElement?

html

javascript

prepend

createelement