jQuery:生成html

Question

有没有更好的方法来做到以下几点？

var html;
var i;
for (i=0; i < 4; i++) {
    html += '<div class="row">';
    html += '<span class="label">Dining Style:</span>';
    html += '<span class="control">';

    var j;
    for (j=0; j < 3; j++){
        html += '<div class="attribBox">';
            html += '<ul>';
                html += '<li><input type="checkbox" /> item 1</li>';
            html += '</ul>';
        html += '</div>';
    }
    html += '</span>';
    html += '<div class="clear"></div>';
}

$("#content").html(html);

Answer 1

您可以使用1.4+中提供的 jquery函数,而不是创建html,以使代码更清晰.这是一个例子:

$("#content").append($("<div/>", {class : 'row'}).append($("<span/>", {class:'label', text : 'Dining Style'})))

上面的代码将生成:

<div class="row"><span class="label">Dining Style</span></div>

你仍然需要循环创建三个孩子,但这更清洁.

Answer 2

看这里

http://api.jquery.com/category/plugins/templates/

和概述

http://www.borismoore.com/2010/10/jquery-templates-is-now-official-jquery.html