如何创建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

回答

相关问题