How to dynamically create a checkbox in JavaScript

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

enter image description here

** 위치 = "location" (in Korean)