[英]Can I create a self-closing element with createElement?
我正在嘗試在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附加到其上嗎？
有沒有更好的方法來實現這一目標？
干杯!
使用document.createDocumentFragment（）創建一個不會自動添加到文檔中的節點。 然后，您可以將元素添加到此片段中，最后將其添加到文檔中。
這是一個很好的鏈接： 文檔片段
使用方法 ：
var fragment = document.createDocumentFragment();
fragment.innerHTML = '<input />';
document.body.appendChild(fragment);
我最終使用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);
編輯 ：如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>
緊跟另一個自閉合自定義元素之前的自閉合自定義元素不顯示
[英]Self-closing custom element not displaying when immediately preceded by another self-closing custom element
為什么 `document.createElement` 不允許創建自閉合標簽？
[英]Why does `document.createElement` do not allow the creation of self-closing tags?
如何在不提示頁面的提示中創建自動關閉鏈接，而無需重新加載頁面？
[英]How do I create a self-closing link inside a tipsy tooltip without reloading the page?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.