我可以使用createElement创建一个自动关闭的元素吗？
[英]Can I create a self-closing element with createElement?
问题描述
I'm trying to append a line of HTML before all the children of the body . 
我正在尝试在body所有子项之前添加一行HTML。
Right now I have this: 现在我有这个：
// 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);
It's working fine because the HTML is being added to the created div . 它工作正常，因为正在将HTML添加到创建的div 。 However, I need to prepend this element without wrapping it in a div. 但是，我需要在不将其包装在div中之前添加此元素。
Is there a way to prepend the HTML without first creating an element? 有没有一种方法可以在不首先创建元素的情况下添加HTML？ If not, can I create the input as a self-closing element and append the label to it? 如果没有，我可以将input创建为自闭元素并将label附加到其上吗？
Is there a better way to achieve this? 有没有更好的方法来实现这一目标？
Cheers! 干杯!
3 个解决方案
解决方案1
2 已采纳 2018-10-07 23:12:16
Use document.createDocumentFragment() to create a node, that isn't automatically added to the document. 使用document.createDocumentFragment（）创建一个不会自动添加到文档中的节点。 You can then add elements to this fragment and finally add it to the document. 然后，您可以将元素添加到此片段中，最后将其添加到文档中。
This is a good link: Document fragment 这是一个很好的链接： 文档片段
How to use : 使用方法 ：
var fragment = document.createDocumentFragment();
fragment.innerHTML = '<input />';
document.body.appendChild(fragment);
解决方案2
1 2018-10-07 23:09:50
I ended up using createRange and createContextualFragment to turn the string into a node that I could prepend using insertBefore .: 我最终使用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
0 2018-10-07 23:12:10
Edit : As Poul Bak showed, there is a very useful feature in the DOM API for that. 编辑 ：如Poul Bak所示，在DOM API中有一个非常有用的功能。 Creating elements separately (instead of having them parsed as a string) allows more control over the elements added (for example you can outright attach an event listener without queryiing it from the DOM later), but for a larger amounts of elements it quickly becomes very verbose. 单独创建元素（而不是将它们解析为字符串）可以更好地控制所添加的元素（例如，您可以直接附加事件侦听器，而无需稍后从DOM查询它），但是对于大量元素，它很快变得非常冗长。
Create each element separately, and insert it before the body content using 分别创建每个元素，然后使用将其插入到正文内容之前
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.