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

【问题标题】：JavaScript how to dynamically add nested html elementsJavaScript如何动态添加嵌套的html元素
【发布时间】：2020-09-16 14:33:25
【问题描述】：

在将文本节点插入跨度时，我已经成功地使用跨度完成了此操作，但现在我需要跨度具有复选框功能，因此我需要围绕每个跨度的标签，以及每个跨度之前的复选框输入。

这是硬编码的外观/工作方式：

抱歉，如果不清楚这是我试图通过 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>

与代码关联的CSS：

.LayerList {
        overflow-y: auto;
        max-height: calc(95% - 60px); /*Has to be 95 so that the last element of span is visible unlike at 100%*/
    }

    .LayerList > .items-container {
        border-top: 1px solid #e7e7e7;
    }

    span:last-child { 
        height: 100%; 
    }

    .LayerList span {
        user-select: inherit;
    }

    input[type="checkbox"]:checked + span {
        border: 1px solid green;
        color: green;
    }
    input[type="checkbox"] {
        visibility: hidden;
    }

这使得当点击 span 时，它充当一个复选框。我希望能够通过我已经拥有的输入框动态添加这些。我设法添加了具有正确样式和文本节点的跨度，但无法弄清楚如何通过 JS 在标签中正确包装复选框和跨度。

我的尝试：

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

基本上我正在寻找的是让这个函数创建一个标签，在其中输入“复选框”类型，然后是一个带有 textnode 提交变量的跨度，该变量已经可以工作。

感谢您的任何建议或帮助

【问题讨论】：

你可以使用 jquery 吗？
最后两行将 inCheckBox 添加到 wrapLabel ...然后将其删除并将其添加到 .layerList ...也许您想改为document.querySelector('.LayerList').appendChild(wrapLabel)（另外，不确定您是什么）正在使用x
@TKoL - 它没有标记 jQuery，所以不要
你能显示你想要创建的 HTML 并添加到页面...这将使回答你的问题更容易 - 此外，你可以使用 insertAdjacentHTML 并将 HTML 构建为文本 - 在许多情况下更容易使用 - 特别是如果使用 template literals
@JaromandaX 如果可能的话，我更喜欢使用纯 JS，并且 x 可以收集像“第 1 层”这样的用户输入并从中产生跨度，就像我在我的 html 代码中提供的硬编码层一样

标签： javascript html css

【解决方案1】：

你的育儿方式有点不对：

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";
    x.className = "item item-layer";
    x.id = submission;

    x.appendChild(t);
    wrapLabel.appendChild(inCheckBox);
    wrapLabel.appendChild(x);

    document.querySelector('.LayerList').appendChild(wrapLabel);
}

layerCreatorX("Hello");

&lt;div id="layerList" class="LayerList" style="font-size: 20px;"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

你几乎做对了，除了最后两行将 inCheckBox 添加到 wrapLabel ...然后将其删除并将其添加到 .layerList 。

我已将以下变量命名为代表元素

顺便说一句，您的示例的文本为 sample layer 1，id 为 sampleLayer - 但在您的代码中，这两者都是 submission - 所以......您的示例有问题

无论如何：

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

现在......你为什么不使用它 - 你可以在代码中准确地看到你正在创建什么......

【讨论】：