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

Question

I have successfully done this with just a span while inserting a text node into the span, but now I need my spans to have checkbox functionality so I need the a label surrounding each span, and a checkbox input before each span.

This is how it looks / works hardcoded:

Sorry if it was unclear this is the HTML part i'm trying to achieve through JS in a dynamic way

 <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 associated with the code:

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

This makes it so that when span is clicked it acts as a checkbox. I would like to be able to add these dynamically, through a input box i already have. I managed to add the span with correct styling and text node, but can't figure out how to wrap the checkbox and span correctly in the label through JS.

My attempt:

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

Basically what i'm looking for is for this function to create a label, inside of it input with type "checkbox" and after that a span with textnode submission variable which already works.

Thanks for any suggestions or help

Answer 1

Your parenting is just a little off:

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

 <div id="layerList" class="LayerList" style="font-size: 20px;"></div>

Answer 2

You almost had it right, except you the last two lines add the inCheckBox to the wrapLabel ... then removes it an adds it to the .layerList .

I've named the variables in the following to be representative of the element

By the way, your sample has the text as sample layer 1 and the id as sampleLayer - yet these are both, in your code, submission - so ... something is wrong with your example

Anyway:

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

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

Now ... why wouldn't you use that - you can see exactly what you're creating ... in the code