const input = document.createElement('input');
input.type = 'checkbox';
Я могу создать флажок, используя приведенный выше код. Однако мне нужно обернуть его в класс div, чтобы мой css мог его отформатировать. Можно ли это сделать?
<div class = "kt-checkbox-list">
<label class = "kt-checkbox">
<input type='checkbox'/>
<span></span>
</label>
</div>
Мне нужно создать его с помощью Js.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


В чистом JS это довольно просто, просто создайте теги div и label с соответствующими классами:
const div = document.createElement("div");
div.class = "kt-checkbox-list";
const label = document.createElement("label");
div.appendChild(label);
label.class = "kt-checkbox";
const input = document.createElement("input");
label.appendChild(input);
input.type = "checkbox";
document.body.appendChild(div);
Джек, спасибо за быстрый ответ, но ваш код по-прежнему не форматирует флажок.
Получил работу, используя атрибут set: ``` div.setAttribute("class", "kt-checkbox-list"); ```
Рад, что смог помочь @Snakins.
Вы можете использовать что-то вроде этого:
<label id = "an-id" class = "kt-checkbox">
а потом
document.getElementById("an-id").innerHTML = "<input type='checkbox' />";
Вы можете просто создать строку HTML, а затем добавить ее в тело документа, используя document.body.innerHTML, например:
const html_str = `
<div class = "kt-checkbox-list">
<label class = "kt-checkbox">
<input type='checkbox'/>
<span></span>
</label>
</div>`;
document.body.innerHTML = html_str;(Примечание: я использовал шаблонные литералы (`) для строки, поскольку это позволяет мне писать HTML в несколько строк. Обычная строка, заключенная в двойные или одинарные кавычки, также будет работать, но вам нужно более внимательно относиться к форматированию. это в вашем JS)
const input = document.createElement('input');
const list = document.createElement('div');
const label = document.createElement('label');
const span = document.createElement('span');
list.classList.add('kt-checkbox');
label.classList.add('kt-checkbox');
label.htmlFor= 'abc';
input.id = 'abc';
input.setAttribute('type', 'checkbox');
label.append(input, span)
list.append(label);
document.body.append(list);
ИЛИ
function createElement(type, attr, ...css) {
const elem = document.createElement(type);
attr && attr.map(obj => Object.keys(obj).map(key => elem.setAttribute(key, obj[key])));
elem.classList.add(...css);
return elem;
}
const input = createElement('input', [{'type': 'checkbox'}, {'id': 'abc'}]);
const list = createElement('div', null, 'kt-checkbox-list');
const label = createElement('label', [{'htmlFor': 'abc'}], 'kt-checkbox');
const span = document.createElement('span');
label.append(input, span)
list.append(label);
document.body.append(list);
Ваш div уже существует в вашем HTML или вы также хотите создать его с помощью JS?