How to create html dynamically using jquery

Question

I want to create a html page dynamically according to a JSON object and I implemented a method and its working fine my current code is given below

$(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);
});

But my actual markup is like this

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

and it will grow eventually so my current method is not capable for creating this kind markup so is there any other way to do the same.

I would strongly encourage you to not go down the path of creating dynamic html in pure javascript or Jquery. This is a much better use case for template based data binding. Look into something like KnockoutJS or other template based frameworks — TGH
– TGH, Commented Oct 1, 2013 at 4:39
Could you please explain what does grow eventually signifies? — Subedi Kishor
– Subedi Kishor, Commented Oct 1, 2013 at 4:41
Please also be aware than dom ids are supposed to be unique. — Scary Wombat
– Scary Wombat, Commented Oct 1, 2013 at 4:44
@KishorSubedi means more fields will be add to the current markup like ssn,address etc.. — Optimus
– Optimus, Commented Oct 1, 2013 at 4:46

Chokchai · Accepted Answer · 2013-10-01 04:50:33Z

3

I think jQuery Tmpl (jQuery Template) is what you need.

https://github.com/BorisMoore/jquery-tmpl

You can just setup the template then bind it with JSON data. It will build the html for you.

for simple example

$.tmpl( "<li>${Name}</li>", { "Name" : "John Doe" }).appendTo( "#target" );

suit your case example

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

Hope this help.

edited Oct 1, 2013 at 4:50

answered Oct 1, 2013 at 4:44

Chokchai

1,72212 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to create html dynamically using jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related