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

Question

我需要為復選框生成HTML。 我使用下面的函數來生成復選框，該函數使用js字符串串聯來生成大型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;
};

然后在ajax調用中使用以下代碼調用該函數：

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

我被告知，生成HTML的方式是不正確的方法，我應該使用jQuery元素的創建/附加來提高可讀性。 我的問題是使用這種方法后我的代碼會是什么樣？ 我開始嘗試其他方法，但這就是我能想到的：

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

任何建議都很棒。 謝謝！

Answer 1

嘗試看看此文檔： http : //api.jquery.com/append/

同樣在您的示例中，您可以具有以下內容：

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

希望對您有所幫助。

Answer 2

從w3開始 ：標簽本身可以位於相關控件之前，之后或周圍。

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

嘗試：

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

您可以使用$(jquery) expression添加屬性和樣式，而不是將標記定義為字符串並將其添加為字符串。 這將消除轉義字符或任何語法問題的麻煩。

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

這是一個例子： https : //fiddle.jshell.net/a2n234eq/5/