如何使用jQuery元素创建/附加生成HTML？

Question

I need to generate HTML for a checkbox. I generate the checkbox using the following function that uses js string concatenation to generate a large block of HTML:

function getColvisCheckboxHTML(){
//  Generates the html for the checkboxes in the column visibility modal
var checkboxes = '';
var tableheaders = table.columns().header();
for(var i = 1;i < tableheaders.length;i++){
    var colindex = tableheaders[i-1].getAttribute('data-column-index');
    var colname = tableheaders[i-1].getAttribute('aria-label').split(':')[0];
    //  Don't include ID column, this column should always be visible
    if(colname != 'ID'){
         checkboxes += '<label class="col-md-2 checkbox-inline"><input type="checkbox" value="' +
            colindex + '">' + colname + '</label>';
    }
    //  Display flags in rows of 5
    if(i%6==0){
        checkboxes += '<br />';
    }
};
return checkboxes;
};

The function is then called using this code within an ajax call:

$('#colvis_chkboxes').html(getColvisCheckboxHTML());

I was informed that the way I generate the HTML is the improper method and that I should use jQuery element creation/appending instead for readability. My question is what would my code look like using this method? I started trying this other method, but this is all I could come up with:

$('<label>', {
   "class": "col-md-2 checkbox-inline"
 }).append(
   $('<input/>', {
      "type": "checkbox"

Any advice would be awesome. Thanks!

Answer 1

Try to take a look at this documentation: http://api.jquery.com/append/

Also in your sample you can have something like this:

$("label.col-md-2 checkbox-inline").append("YOUR HTML HERE");

Hope that help.

Answer 2

From w3 : The label itself may be positioned before, after or around the associated control.

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

Try with:

var container = $('<div>');
container.append('<label class="col-md-2 checkbox-inline"></label>);
container.append('<input type="checkbox" name="my_name" />);
// OR
var container = $('<div>');
$('<input />', { type: 'checkbox', id: 'cb_id', value: name }).appendTo(container);
$('<label />', { 'for': 'cb_id', text: name, class: 'col-md-2 checkbox-inline' }).appendTo(container);

Answer 3

Instead of defining and adding the markup as a string, you can add attributes and styles using $(jquery) expression . This would eliminate the hassle of escaping characters or any syntax issues.

var ele = $('<input>').addClass("green").attr("value","test").css("color","green");
$('div').append(ele);

Here's an example : https://fiddle.jshell.net/a2n234eq/5/