如何使用Jquery动态地将Button添加到li标签

Question

我正在动态创建一个Button，需要添加到li标签

这是我的jsfiddle

http://jsfiddle.net/1ty1v8u1/7/

这是我的代码

function showRestaurantDetailsByLocation(response,locationname)
{
$('.restListings').remove();
$('.addNewRestaurant').remove();
var ulhtml = $('<ul class="restListings"></ul>');
var divhtml = $('<div class="inner-intit"><sub class="sub">Your Favorite Area</sub></div>');
divhtml.append('<br>');
var $newbutton= $('<input/>').attr({ type: 'button', location:locationname , name:'btn1', class:'btn btn-success', value:'Add For'+locationname});
var $ordernow= $('<input/>').attr({ type: 'button',name:'btn1', class:'btn btn-success', value:'Order Now'});
for(var i=0;i<response.length;i++)
{
divhtml.append('<li><h6>'+response[i].area+'</h6><p>'+response[i].address+'</p></li>');
}
divhtml.append($newbutton); 
divhtml.append($ordernow); 
ulhtml.append(divhtml);
$("#"+locationname).append(ulhtml);
}

我尝试了这些选项

var $ordernow= $('<input/>').attr({ type: 'button',  name:'btn2', class:'btn btn-success ordernow', value:'Order Now'});

divhtml.append('<li class="innerChild" user_location="'+locationname+'" vendor_name="'+response[i].vendor_name+'"    vendor_id="'+response[i].vendor_id+'" ><h6> '+response[i].vendor_name+'</h6><p>'+response[i].locality+' , '+response[i].area+' </p><p><b>Timings:</b> '+response[i].start_time+' - '+response[i].end_time+'</p><span class="inDeleteInnerSub"></span></li>');

$('<li />').appendTo(ordernow);

方法2：

divhtml.append('<li class="innerChild" user_location="'+locationname+'" vendor_name="'+response[i].vendor_name+'"    vendor_id="'+response[i].vendor_id+'" ><h6> '+response[i].vendor_name+'</h6><p>'+response[i].locality+' , '+response[i].area+' </p><p><b>Timings:</b> '+response[i].start_time+' - '+response[i].end_time+'</p><span class="inDeleteInnerSub"></span>ordernow </li>');

方法3：

divhtml.append('<li class="innerChild" user_location="'+locationname+'" vendor_name="'+response[i].vendor_name+'"    vendor_id="'+response[i].vendor_id+'" ><h6> '+response[i].vendor_name+'</h6><p>'+response[i].locality+' , '+response[i].area+' </p><p><b>Timings:</b> '+response[i].start_time+' - '+response[i].end_time+'</p><span class="inDeleteInnerSub"></span>'+$ordernow+'</li>');

将其显示为对象

Answer 1

如果您只想在li元素中使用“立即订购”按钮，请更改以下行：

原件：

divhtml.append($ordernow);

修改：

divhtml.children("li").append($ordernow);

此外，如果您希望按钮显示在右侧，只需将此css属性添加到按钮：

float:right

以下是更新后的JSFiddle。

修改

或者更接近你的照片是JSFiddle。我为h6和p添加了一个容器-div，其css-property为

float:left