Question

我想根据 JSON 对象动态创建一个html页面，我实现了一个方法，它的工作正常我的当前代码如下所示

$(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>

它最终会增长所以我当前的方法无法创建这种标记，所以有没有其他方法来做同样的事情。

Answer 1

我认为jQuery Tmpl（jQuery Template）就是你所需要的。

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" );

希望得到这个帮助。

如何使用jquery动态创建html

1 个答案: