javascript - 如何使用jquery动态创建html

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

希望这有帮助。