Как создать HTML динамически, используя jquery

Question

Как создать HTML динамически, используя jquery

0

Я хочу создать html-страницу динамически в соответствии с объектом JSON, и я реализовал метод и его работу отлично, мой текущий код приведен ниже

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

и он будет расти в конце концов, поэтому мой текущий метод не способен создавать такую разметку вида, так что есть ли другой способ сделать то же самое.

Optimus 01 окт. 2013, в 06:58

Источник

0

Я настоятельно рекомендую вам не идти по пути создания динамического HTML в чистом JavaScript или Jquery. Это гораздо лучший вариант использования для привязки данных на основе шаблонов. Посмотрите на что-то вроде KnockoutJS или других основанных на шаблонах фреймворков
TGH 01 окт. 2013, в 04:39
0

Не могли бы вы объяснить, что в grow eventually означает grow eventually ?
Subedi Kishor 01 окт. 2013, в 04:41
0

Также имейте в виду, что идентификаторы dom должны быть уникальными.
Scary Wombat 01 окт. 2013, в 04:44
0

@KishorSubedi означает, что к текущей разметке будет добавлено больше полей, таких как ssn, address и т. Д.
Optimus 01 окт. 2013, в 04:46

Показать ещё 2 комментария

Теги:

javascript

jquery

html

1 ответ

Ещё вопросы

Я настоятельно рекомендую вам не идти по пути создания динамического HTML в чистом JavaScript или Jquery. Это гораздо лучший вариант использования для привязки данных на основе шаблонов. Посмотрите на что-то вроде KnockoutJS или других основанных на шаблонах фреймворков
Не могли бы вы объяснить, что в grow eventually означает grow eventually ?
Также имейте в виду, что идентификаторы dom должны быть уникальными.
@KishorSubedi означает, что к текущей разметке будет добавлено больше полей, таких как ssn, address и т. Д.

Chokchai · Accepted Answer · 2013-10-01T02-22-00.000Z

Я думаю, что 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" );

Надеюсь, это поможет.