JavaScript如何动态添加嵌套的html元素

在将文本节点插入跨度时，我已经成功地使用了一个跨度，但现在我需要我的跨度具有复选框功能，所以我需要在每个跨度周围添加一个标签，并在每个跨度之前输入一个复选框

这是它的外观/工作原理硬编码：

抱歉，如果不清楚，这是我试图通过JS动态实现的HTML部分

 <div id="layerList" class="LayerList" style="font-size: 20px;">
    <label>
        <input class="checkbox" type="checkbox"><span class="item item-layer" id="sampleLayer">sample layer 1</span>
    </label>
</div>

这样，当单击span时，它将充当复选框。我希望能够通过我已有的一个输入框动态添加这些。我成功地添加了带有正确样式和文本节点的span，但不知道如何通过JS将复选框和span正确地包装在标签中

我的尝试：

function layerCreatorX(submission) {
    let wrapLabel = document.createElement("label") 
    let inCheckBox = document.createElement("input")
    let x = document.createElement("span")
    let t = document.createTextNode(submission)
    inCheckBox.type = "checkbox"
    layerArray.push(submission)
    x.className = "item item-layer"
    x.id = submission 
    x.appendChild(t)
    document.querySelector('.LayerList').appendChild(x)
    wrapLabel.appendChild(inCheckBox)
    document.querySelector('.LayerList').appendChild(inCheckBox)
}

基本上，我要找的是这个函数创建一个标签，在它里面输入“checkbox”，然后是一个包含textnode提交变量的span，这个变量已经可以工作了

---

感谢您的建议或帮助

您的育儿方式有点不对劲：

功能层Creatorx（提交）{
设wrapLabel=document.createElement（“标签”）；
让inCheckBox=document.createElement（“输入”）；
设x=document.createElement（“span”）；
设t=document.createTextNode（提交）；
inCheckBox.type=“复选框”；
x、 className=“项目层”；
x、 id=提交；
x、 儿童（t）；
wrapLabel.appendChild（inCheckBox）；
附肢儿童（x）；
document.querySelector（'.LayerList'）.appendChild（wrapLabel）；
}
layerCreatorX（“你好”）
你的育儿方式有点不对劲：


功能层Creatorx（提交）{
设wrapLabel=document.createElement（“标签”）；
让inCheckBox=document.createElement（“输入”）；
设x=document.createElement（“span”）；
设t=document.createTextNode（提交）；
inCheckBox.type=“复选框”；
x、 className=“项目层”；
x、 id=提交；
x、 儿童（t）；
wrapLabel.appendChild（inCheckBox）；
附肢儿童（x）；
document.querySelector（'.LayerList'）.appendChild（wrapLabel）；
}
layerCreatorX（“你好”）
除了最后两行将inCheckBox添加到wrapLabel中之外，您几乎做对了。。。然后将其删除并添加到.layerList

我在下面命名了代表元素的变量

顺便说一下，您的示例的文本为
sample layer 1
，id为
sampleLayer
——但在您的代码中，
提交
——因此。。。你的例子有点不对劲

无论如何：

function layerCreatorX(submission) {
  layerArray.push(submission);
  
  const label = document.createElement('label');
  
  const input = document.createElement('input');
  input.className = input.type = 'checkbox';
  
  const span = document.createElement('span');
  span.className = 'item item-layer';
  span.appendChild(document.createtextNode(submission));
  span.id = submission;
  
  label.appendChild(input);
  label.appendChild(span);
  
  document.querySelector('.LayerList').appendChild(label);
}

使用insertAdjacentHTML

function layerCreatorX(submission) {
    const html = `<label>
        <input class="checkbox" type="checkbox"/>
        <span class="item item-layer" id="${submission}">
            ${submission}
        </span>
    </label>`
    document.querySelector('.LayerList').insertAdjacentHTML('before-end', html);
}

功能层Creatorx（提交）{
常量html=`
${提交}
`
document.querySelector（'.LayerList'）.insertAdjacentHTML（'before-end'，html）；
}

现在。。。你为什么不使用它呢？你可以准确地看到你在创造什么。。。在代码中，除了最后两行将inCheckBox添加到wrapLabel中之外，您几乎做对了。。。然后将其删除并添加到.layerList

我在下面命名了代表元素的变量

顺便说一下，您的示例的文本为
sample layer 1
，id为
sampleLayer
——但在您的代码中，
提交
——因此。。。你的例子有点不对劲

无论如何：

function layerCreatorX(submission) {
  layerArray.push(submission);
  
  const label = document.createElement('label');
  
  const input = document.createElement('input');
  input.className = input.type = 'checkbox';
  
  const span = document.createElement('span');
  span.className = 'item item-layer';
  span.appendChild(document.createtextNode(submission));
  span.id = submission;
  
  label.appendChild(input);
  label.appendChild(span);
  
  document.querySelector('.LayerList').appendChild(label);
}

使用insertAdjacentHTML

function layerCreatorX(submission) {
    const html = `<label>
        <input class="checkbox" type="checkbox"/>
        <span class="item item-layer" id="${submission}">
            ${submission}
        </span>
    </label>`
    document.querySelector('.LayerList').insertAdjacentHTML('before-end', html);
}

功能层Creatorx（提交）{
常量html=`
${提交}
`
document.querySelector（'.LayerList'）.insertAdjacentHTML（'before-end'，html）；
}

现在。。。你为什么不使用它呢？你可以准确地看到你在创造什么。。。在代码中
您同意使用jquery吗？最后两行将inCheckBox添加到wrapLabel。。。然后删除它并将其添加到.layerList。。。也许您想要
document.querySelector（'.LayerList'）.appendChild（wrapLabel）
（另外，不知道你在用
x
@TKoL做什么-它没有标记jQuery，所以你不能显示你想要创建的HTML并添加到页面中…这将使回答你的问题更容易-而且，你可以使用HTML并将其构建为文本-在许多情况下更容易使用-特别是如果使用@JaromandaX，我将如果可能，请参考使用纯JS，x用于收集用户输入，如“第1层”，并对其进行扩展，如我在html代码中提供的硬编码层。您同意使用jquery吗？最后两行将inCheckBox添加到wrapLabel…然后将其删除并添加到.layerList…也许您想要
document.querySelector（'.LayerList'）.appendChild（wrapLabel）
（另外，不知道你在用
x
@TKoL做什么-它没有标记jQuery，所以你不能显示你想要创建的HTML并添加到页面中…这将使回答你的问题更容易-而且，你可以使用HTML并将其构建为文本-在许多情况下更容易使用-特别是如果使用@JaromandaX，我将如果可能的话，请参考使用纯JS，x是用来收集用户输入的，比如“第1层”，并将其扩展，比如我在html代码中提供的硬编码层