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)

checkbox don't have innerHTML, you need to append the text inside the label beside the checkbox. — shushu304
– shushu304, Commented Jan 3, 2021 at 16:17
Welcome to StackOverflow. On a first glimpse, I see some irregularities in your HTML: An UL element must contain only LI elements; A LABEL element should enclose at most one INPUT; both of your INPUTs share the same name (valid just in radiobuttons). Please, provide us your complete javascript function, and also the complete generated HTML. — Little Santi
– Little Santi, Commented Jan 3, 2021 at 16:27

lissettdm · Accepted Answer · 2021-01-03 16:37:51Z

4

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

answered Jan 3, 2021 at 16:37

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to dynamically create a checkbox in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related