html - How to dynamically create a checkbox in JavaScript

Question

We are dynamically creating multiples checkbox in JavaScript. But, there is one problem. The checkbox has been created, but it's label is not visible. We confirmed that it was created properly by the developer tool. But I can't see the label on the web. How do we deal with this? I attach the photo. I also attach the code.

radio.setAttribute("type", "checkbox");
radio.setAttribute("id", "lo_radio");
radio.setAttribute("name", "choose");
radio2.setAttribute("type", "checkbox");
radio2.setAttribute("id", "lo_radio2");
radio2.setAttribute("name", "choose");
... 
 if(j==1){
        var color = document.getElementById("#color_li");
        //ul.insertBefore(radio, color);
        var label = document.createElement("label");
        ul.insertBefore(label, color);
        label.appendChild(radio);
        radio.innerHTML = radio.innerHTML + "10?";
        label.appendChild(radio);
    
//      ul.insertBefore(radio2, color);
        ul.insertBefore(label, color);
        label.appendChild(radio2);
        radio2.innerHTML = radio2.innerHTML + "30?";
        ul.insertBefore(lo_select, color);


        $("#lo_li").click(function() {  
            if($("#lo_select").is(":visible")){
                  $("#lo_select").slideUp();
            }
            else{   
                $("#lo_select").slideDown();
            }});

    }
...
//HTML
<section id = "section1_r" style = "background-color : #525252; font-family : a?????1, sans_serif">
<div id = "a2">
</div>

enter image description here

HTML in browser console:

** ?? = "location" (in Korean)

Answer 1

If you are trying to create a checkbox programmatically:

const label = document.createElement("label");
const checkbox = document.createElement("input");
checkbox.type="checkbox";
checkbox.id="some-id";
checkbox.name="some-name";
const textContent = document.createTextNode("Label text content");

label.appendChild(checkbox);
label.appendChild(textContent);

document.body.appendChild(label);