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

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

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

使用方法：

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

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

Answer 3

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

分别创建每个元素，然后使用

将其插入到正文内容之前

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>

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

3 个答案: