Question

如何使用 jquery 动态创建 html

2013-10-01

230

javascript jquery html

我想根据 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 模板) 就是您所需要的。

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

希望这能有所帮助。