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

在开发跨平台移动应用中，由于数据动态更新，所以列表项需要动态生成，查了很多资料，以下方法亲测可用

html5代码

 <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