How to Create element on the fly if the parameter is exist by using jquery

Question

I have this function for building HTML.

CreateInputCheckboxActive: function (id, mainClass, checked, headerTxt, inputTxt) {
    var bootstrapClass = "col-sm-6 ";
    return (
     $("<div/>", { class: bootstrapClass + mainClass }).append(
         $("<label/>", { "text": headerTxt }),
         $("<input/>", {
            "id": mainClass,
            "class": mainClass,
            "type": "checkbox",
            "checked": checked
         }),
         $("<label/>", {
            "class": mainClass,
            "for": mainClass,
            "text": checked == true ? inputTxt[0] : inputTxt[1]
         })
         )
     );
}

How can I create the first label just if the parameter headerTxt has a value? I want to use this way of jquery.

Possible duplicate of [Is there a standard function to check for null, undefined, or blank variables in JavaScript?](https://stackoverflow.com/questions/5515310/is-there-a-standard-function-to-check-for-null-undefined-or-blank-variables-in) — Liam, Jan 23 '18 at 09:48
Thanks. I can not add if inside the function append. it gives an error!! — , Jan 23 '18 at 09:49

score 3 · Answer 1 · answered Jan 23 '18 at 09:50

Try to add a condition before appending the <label> like :

CreateInputCheckboxActive: function (id, mainClass, checked, headerTxt, inputTxt) {
        var bootstrapClass = "col-sm-6 ";
        var parent = $("<div/>", { class: bootstrapClass + mainClass });
        if(headerTxt)
           parent.append($("<label/>", { "text": headerTxt }));
        parent.append($("<input/>", {
                "id": mainClass,
                "class": mainClass,
                "type": "checkbox",
                "checked": checked
             }),
             $("<label/>", {
                "class": mainClass,
                "for": mainClass,
                "text": checked == true ? inputTxt[0] : inputTxt[1]
             })
        );
        return parent;
    }

score 0 · Accepted Answer · answered Jan 23 '18 at 09:53

Wrap the first label in a ternary if statement:

(headerTxt ? $("<label/>", { "text": headerTxt }) : ''),

Full Code:

CreateInputCheckboxActive = function (id, mainClass, checked, headerTxt, inputTxt) {
        var bootstrapClass = "col-sm-6 ";
        return (
         $("<div/>", { class: bootstrapClass + mainClass }).append(
             (headerTxt ? $("<label/>", { "text": headerTxt }) : ''),
             $("<input/>", {
                "id": mainClass,
                "class": mainClass,
                "type": "checkbox",
                "checked": checked
             }),
             $("<label/>", {
                "class": mainClass,
                "for": mainClass,
                "text": checked == true ? inputTxt[0] : inputTxt[1]
             })
             )
         );
    };
    
    jQuery('body').append(
    
      //With Header
      CreateInputCheckboxActive('not-used', 'class-used-for-id-and-class', false, 'Header Text', ['Checked', 'Not Checked']),
      
      '<br/>',
      
      //Without Header
      CreateInputCheckboxActive('not-used', 'class-used-for-id-and-class', true, null, ['Checked', 'Not Checked'])
      
    );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

How to Create element on the fly if the parameter is exist by using jquery

2 Answers2