javascript - Appending lots of HTML with jQuery -

in trying make single-page site, i've gotten habit of using jquery's .append function quite bit. however, i'm sure there must better way of appending large blocks of code (for items such tables, graphs, etc.) page. instance, here's hideous block ajax response:

  $.ajax({     data: {         'cmd': 'rating',         'api' : target     },     url: "api/feedback.php",     global: false,     type: "post",     cache: false,     datatype: "json",     success: function(response) {             document.getelementbyid("swagger-ui-container").innerhtml = "";             var formelement = '<form class="form-horizontal"> <div class="form-group"> <label class="control-label col-md-12 title" for="title" style="padding-top:4vh; padding-bottom: 4vh"><h1 align="center">' + target + ' feedback form</h1></label> </div> <div class="form-group"> <label class="control-label col-md-2" for="name">name:</label> <div class="col-md-9"> <input type="name" class="form-control" id="name" placeholder="please enter name."> </input> </div> </div> <div class="form-group"> <label class="control-label col-md-2" for="email">email:</label> <div class="col-md-9"> <input type="email" class="form-control" id="email" placeholder="please enter email address."> </input> </div> </div> <div class="form-group"> <label class="control-label col-md-2" for="comments">comments:</label> <div class="col-md-9"> <textarea class="form-control" rows="10" id="comments" placeholder="please enter comments."></textarea> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="rating" style="padding-top: 1.3vh">please rate api <br/>(click stars):</label> <div class="col-md-9"> <div class="stars"> <form action=""> <input class="star star-5" id="star-5" type="radio" name="star"/> <label class="star star-5" for="star-5"></label> <input class="star star-4" id="star-4" type="radio" name="star"/> <label class="star star-4" for="star-4"></label> <input class="star star-3" id="star-3" type="radio" name="star"/> <label class="star star-3" for="star-3"></label> <input class="star star-2" id="star-2" type="radio" name="star"/> <label class="star star-2" for="star-2"></label> <input class="star star-1" id="star-1" type="radio" name="star"/> <label class="star star-1" for="star-1"></label> current rating: ' + response[0]['rating'] + '</form> </div> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-9"> <button type="submit" class="btn btn-success" style="margin-bottom: 5vh">submit review</button> </div> </div> </form>';             document.getelementbyid("swagger-ui-container").innerhtml = formelement;             console.log(response);     } }); 

is there better way manage blocks without resorting using lots of .append calls?

you can create element in html , hide it, , use template. clone, , add response's data @ right place.

for example:

<div id="templates" style="display: none;">     <div class="feedbacktmpl>         <p class="feedbackresponse"></p>     </div>     <!-- add more templates if needed... --> </div>  // ajax call, , in success response: var feedbacktmpl = $('.feedbacktmpl', '#templates').clone(); $('.feedbackresponse', feedbacktmpl).text(response[0]['rating']);  // boom! feedbacktmpl ready inserted / appended