jquery 动态生成html5列表项以及header，footer的固定，居中排列

<div data-role="page" id="index" >
<div style="overflow: hidden;" data-role="header" data-position="fixed">
<h1>首页</h1>
<div data-role="navbar" style="background-color:silver;">
<ul>
<li><a href="#index">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</div>

<div data-role="content">

<ul data-role="listview" id="all" ></ul>

</div>

<div style="overflow: hidden;" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#index">首页</a></li>
<li><a href="#">收藏</a></li>
<li><a href="#">日历</a></li>
<li><a href="setting.html" rel="external">设置</a></li>
</ul>
</div>
</div>
</div>

$.ajax({
url: '（url）',
type: 'GET',
dataType: 'XML',

success: function (data) {
all = $('#all');//括号内为要生成列表项地方的id
var iHtml = '';
count = $(data).find("record").each(//每出现一次<record>执行一次下面的函数
function () {
iHtml += '<li style="list-style-type:none;"><div style="vertical-align:middle;float:left;font-size:8%"><img style="margin-bottom: -4px;width: 14%" src="" /><span> </span></div>'
+ ' <div style="vertical-align:middle;float:right;font-size:8%"> <img style="margin-bottom: -4px;width:25%" src="" />12345</div><br />'
+ '<div> <a href="#" onclick="getcard_details(' + 变量 + ');"><img style=" margin: 0 0 -45% 0; overflow: hidden;" id="' + 变量 + '" width="100%" src=' + 变量 + 'aid:' + 变量 + '_display:1></a></div>' + '</li>';
}
).length;//count.length是为了获得<record>标签出现的次数，可不要
iHtml += '<a class="ui-btn" href="#">+添加更多</a>';
all.html(iHtml).listview('refresh');
}
});