javascript - Optimize way to append element in html using jquery -

javascript - Optimize way to append element in html using jquery -

what optimize way append element specific div class using jquery. generate dynamic elements. utilize .appendto display dynamically element within <div class='parent-list-workorder'>.

here's code far doesn't work:

$(document).ready(function(){ var listofworkorders = []; $("#button").click(function(){ //var _woid = $('.list-workorder-id').text(); var _woid = $('#txtwoid').val(); //alert(_woid); $.ajax({ url:'getworkorders.php', type:'post', data:{id:_woid}, datatype:'json', success:function(output){ (var key in output) { if (output.hasownproperty(key)) { $("<div class='child-list-workorder'> <div class='list-workorder'> <div class='list-workorder-header'> <h3 class='list-workorder-id'>" + output[key] + "</h3> </div> <p>" + sample + ":" + key + "</p> </div> </div>").appendto("<div class='parent-list-workorder'>"); //alert(output[key]); } } console.log(output); } }); }); });

am missing something?

you have 2 problems. first, need utilize selector argument .appendto(), not html string. second, need remove or escape newlines in html string.

$("<div class='child-list-workorder'>\ <div class='list-workorder'>\ <div class='list-workorder-header'>\ <h3 class='list-workorder-id'>" + output[key] + "</h3>\ </div>\ <p>" + sample + ":" + key + "</p>\ </div>\ </div>").appendto("div.parent-list-workorder");

javascript jquery html css ajax