Javascript createElement-需要使用div类包装输入文本以进行css格式化

我可以使用上面的代码创建一个复选框。但是，我需要将其包装在div类中，以便css可以对其进行格式化。这能做到吗

const input = document.createElement('input');
input.type = 'checkbox';

---

在纯JS中，它相当简单，只需使用适当的类创建

div

和

label

标记：

<div class="kt-checkbox-list">
<label class="kt-checkbox">
<input type='checkbox'/>
<span></span>
</label>
</div>

---

您可以使用以下内容：

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

然后

<label id="an-id" class="kt-checkbox">

document.getElementById（“一个id”）.innerHTML=“”；

您只需创建一个HTML字符串，然后使用

document.body.innerHTML将其添加到文档正文中，如下所示：


const html\u str=`
`;
document.body.innerHTML=html\u str
或

你的div已经存在于你的HTML中了吗？还是你也想用JS创建它？我需要用JS.Jack创建它，谢谢你的快速响应，但是你的代码仍然没有设置复选框的格式。使用set属性让它工作：```div.setAttribute（“类”，“kt复选框列表”）```很高兴我能帮助@Snakins。
document.getElementById("an-id").innerHTML = "<input type='checkbox' />"; 

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