Question

Có cách nào tốt hơn để làm như sau không?

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

Look đây

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

và tổng quan

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

Answer 2

Nối Child
Tạo phần tử
hoặc đơn giản nhất, innerHTML: http://www.tizag.com/javascriptT/javascript-innerHTML.php

Answer 3

Thay vì tạo html, bạn có thể sử dụng chức năng jquery, có sẵn trong 1,4+, để làm cho mã của bạn sạch hơn. Dưới đây là một ví dụ:

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

Đoạn mã trên sẽ tạo ra:

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

Bạn vẫn phải vòng lặp để tạo ra ba đứa con nhưng đây là nhiều bụi.

Answer 4

Tôi sẽ sử dụng hệ thống templating như iCanHaz.js