jquery - How to append dynamic dropdownlist as raw html? -

i have make 2 dropdownlist dynamically , appened them table table consists of 17 columns , first 2 tds dropdownlist

this code atm:

$(document).on('click', 'input[type="button"].addrowreceiving', function () {             //get current row count        $size = $('table#receivingdetail > tbody > tr').size();         $visible = $('table#receivingdetail > tbody > tr:visible').size();          if ($visible <= 4) {            $contacttable = $('table#receivingdetail tbody');             var item = $('<select name="itemsassoc['+ $size +'].f_itemno/>');            var location = $('<select name="itemsassoc[' + $size + '].f_locationid/>');              $.getjson('@url.action("getitemsandwarehouse")', {}, function (e) {                      $.each(e.warehouses, function (index, val) {                         $('<option />', { value: val.f_id, text: val.f_location }).appendto(location);                     });                      $.each(e.items, function (index, val) {                         $('<option />', { value: val.f_id, text: val.f_itemno }).appendto(item);                     });                   });                  var stringapp = '<tr><td>'+  + '</td><td>' + ?? + '</td></tr>'         // how add?                  $contacttable.append(stringapp);          } else {                 alert('limit reached');         }    }); 

since have add 15 more tds later on, somehow wanted them added have more controls(since need specify names)

var stringapp = '<tr><td>'+  + '</td><td>' + ?? + '</td></tr>'         // how add? $contacttable.append(stringapp); 

but [object object] if put item or location,

how should append em?

try this:

 var stringapp = '<tr><td>'+ $('<div>').append(item).html() + '</td><td>' + $('<div>').append(location).html() + '</td></tr>'; 

this create dynamic element <div> innerhtml item's/location's html content. html() function skip <div> , content string. html() return inner html of given element excluding parent element tag. <div> act parent here , html() return inner part <select>. if don't use <div> return inner part of <select> <option>s only.

also suggest use simple jquery :

$(document).on('click', 'input[type="button"].addrowreceiving', function () {     $size = $('table#receivingdetail > tbody > tr').size();     $visible = $('table#receivingdetail > tbody > tr:visible').size();     if ($visible <= 4) {         $contacttable = $('table#receivingdetail tbody');         var item = $('<select name="itemsassoc['+ $size +'].f_itemno/>');         var location = $('<select name="itemsassoc[' + $size + '].f_locationid/>');         $.getjson('@url.action("getitemsandwarehouse")', {}, function (e) {             $.each(e.warehouses, function (index, val) {                 location.append('<option value="'+val.f_id+'">'+val.f_location+'</option>');             });             $.each(e.items, function (index, val) {                 item.append('<option value="'+val.f_id+'">'+val.f_itemno+'</option>');             });         });         var stringapp = '<tr><td>'+ $('<div>').append(item).html() + '</td><td>' + $('<div>').append(location).html() + '</td></tr>';         $contacttable.append(stringapp);     } else {         alert('limit reached');     }  });