如何創建HTML動態使用jQuery

我要動態地創建根據JSON對象的HTML頁面，我實現了一個方法和它的工作的罰款我當前的代碼如下如何創建HTML動態使用jQuery

$(function(){ 
    var result =JSON.parse(response); 
    var markup=""; 
    for (var i=0;i<result.length;i++) { 
     markup+="<div id='nameDiv'>"+result[i].name+"</div>"; 
    } 
    $('.divLoadData:last').after(markup); 
});

但我的實際給出的標記是這樣

<div class="divLoadData"> 
    <div class="name" id="nameDiv"> 
     Name 
    </div> 
    <div class="numberb"> 
     <div id="age"> 
      Age 
     </div> 
    </div> 
    <div class="numberb dob"> 
     <div id="dob"> 
      DOB 
     </div> 
    </div> 
</div>

將會持續增長，最終使我現在的方法是不能夠創造這種標記那麼，有沒有其他辦法可以做到一樣。

來源

2013-10-01 Optimus

我強烈建議您不要走在純JavaScript或Jquery中創建動態html的路徑。對於基於模板的數據綁定，這是一個更好的用例。看看像KnockoutJS或其他基於模板的框架 – TGH

你能解釋一下「最終成長」是什麼意思？ –

請注意，dom ids應該是獨一無二的。 –

我認爲jQuery Tmpl（jQuery模板）就是你需要的。

https://github.com/BorisMoore/jquery-tmpl

你可以設置模板然後將其綁定與JSON數據。它會爲你建立html。

爲簡單的例子

$.tmpl("<li>${Name}</li>", { "Name" : "John Doe" }).appendTo("#target");

適合你的情況下，例如

var movies = [ 
     { Name: "The Red Violin", ReleaseYear: "1998" }, 
     { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, 
     { Name: "The Inheritance", ReleaseYear: "1976" } 
    ]; 

    var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>"; 

    // Compile the markup as a named template 
    $.template("movieTemplate", markup); 

    // Render the template with the movies data and insert 
    // the rendered HTML under the "movieList" element 
    $.tmpl("movieTemplate", movies) 
     .appendTo("#movieList");

希望這有助於。

來源

2013-10-01 04:44:51 Chokchai

如何創建HTML動態使用jQuery

回答

相關問題