Могу ли я создать самозакрывающийся элемент с помощью createElement? - PullRequest
Новая
       37

Могу ли я создать самозакрывающийся элемент с помощью createElement?

0 голосов
/ 08 октября 2018

Я пытаюсь добавить строку HTML перед всеми потомками body.

Прямо сейчас у меня есть это: 

// 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?

Есть ли лучший способ добиться этого?

Ура!

Ответы [ 3 ]

0 голосов
/ 08 октября 2018

Редактировать : Как показал 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>
0 голосов
/ 08 октября 2018

Используйте document.createDocumentFragment () для создания узла, который не добавляется автоматически в документ.Затем вы можете добавить элементы к этому фрагменту и, наконец, добавить его в документ.

Это хорошая ссылка: Фрагмент документа

Как использовать : 

var fragment = document.createDocumentFragment();
fragment.innerHTML = '<input />';
document.body.appendChild(fragment);
0 голосов
/ 08 октября 2018

В итоге я использовал 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);
...