Javascript 在Jquery Mobile中动态创建和添加页面

我有一个数组，其中包含一组小部件ID[s1、s2、s3…等等]。这个数组可能会有所不同，因为有时候它可以有5个id，有时候它可以有2个id，等等。所以基本上，当我在这个数组中循环时，我希望能够为数组中的每个id动态创建页面

这是我希望能够为每个id动态创建的页面的基本格式

  <!--id should eqqual id# like s1,s2,s3,etc -->

   <div data-role="page" id="page5">

              <div data-role="header" data-position="fixed">
               <a data-iconpos="notext" href="#" data-role="button" data-icon="flat-menu"></a>
                    <h1>BasketBall Fanatico</h1>
                     <a data-iconpos="notext" href ="#page2" data-role="button" data-icon="home" title="Home">Home</a>
              </div>

                   <div data-role="content">

                    <ul data-role="listview" data-inset="true">

                     <li data-role="list-divider" data-theme="b">Raptors Score</li>
                     <li><h2>0</h2></li> 
                    </ul>
                   </div>


          </div>

篮球狂热者

猛龙队得分
0

这是我在数组中迭代ID并尝试动态添加页面的循环。这是我为了获得结果而尝试的，但失败了

for(var i=0; i<widgetId.length; i++){

            var makePage = $("<div data-role='page' id="+widgetId[i]+">
              <div data-role='header' data-position='fixed'><a data-iconpos='notext' href='#' data-role='button' data-icon='flat-menu'></a>
              <h1>BasketBall Fanatico</h1><a data-iconpos='notext' href='#page2' data-role='button' data-icon='home' title='Home'>Home</a></div>
              <div data-role='content'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='b'>Raptors Score</li>
              <li><h2>0</h2></li></ul></div></div>");

            makePage.appendTo($mobile.pageContainer);

          }

---

for（var i=0；i我必须动态地将产品添加到拍卖页面，我使用了以下代码。问题是我不知道我将在页面上显示多少产品

/* takes element type and all options for element returns html string for the element
* Arg1 is the type of element to create 
* Options is an array/list of key-value pairs. The even numbered objects in the array 
* will represent the attribute name, the odd elements will be the value of the attribute*/ 
function addElement(ELEMENT, options)
{
    var element = document.createElement(ELEMENT); //create the element

    var i = 0;//iterate through the array and set each element
    while(i < options.length)
       element.setAttribute(options[i++], options[i++]);
    return element;
}

/*采用元素类型，元素的所有选项返回元素的html字符串
*Arg1是要创建的元素的类型
*选项是键值对的数组/列表。数组中的偶数对象
*将表示属性名称，奇数元素将是属性的值*/
函数附加元素（元素、选项）
{
var element=document.createElement（element）；//创建元素
var i=0；//遍历数组并设置每个元素
而（i

然后在我的索引文件中，我这样做“fullProductList”是一个div，它将保存包含产品的所有div：

//get the html for each item and write it to the page
for( var i = 0; i < productList.length; i++)
    $("#fullProductList").append(getProductHTML(productList[i], i));

//获取每个项目的html并将其写入页面
对于（var i=0；i

以下是getProductHTML：

/* creates a parent div for each product that will be displayed on the page
 * a picture is displayed in the parent div then a child div is created
 * in order to display product info and a bid button which happens in another function*/
function getProductHTML(prod, id)
{//create the parent div
    var html = document.createElement('div');
    html.className = 'singleProduct';
    html.id = id;
    //append the picture to the parent div
    html.appendChild(addElement('img', ['SRC', prod.pic, 'ALT', prod.name, "height", "400px", 'class', 'pic']));
    //create div for product title
    var title = document.createElement('div');
    title.className = 'prodTitle';
    title.innerHTML = '<b>'+prod.name + "<b><BR>" ;
    html.appendChild(title);
    html.appendChild(writeProductInfo(prod));//this creates another child div for the product data
    return html;
}

/*为页面上显示的每个产品创建父div
*在父div中显示图片，然后创建子div
*为了显示产品信息和另一个功能中出现的投标按钮*/
函数getProductHTML（prod，id）
{//创建父div
var html=document.createElement（'div'）；
html.className='singleProduct'；
html.id=id；
//将图片附加到父div
appendChild（addElement（'img'，['SRC'，prod.pic'，ALT'，prod.name，“height”，“400px”，“class”，“pic'））；
//为产品标题创建div
var title=document.createElement（'div'）；
title.className='prodTitle'；
title.innerHTML=''+prod.name+“
”；
html.appendChild（标题）；
appendChild（writeProductInfo（prod））；//这将为产品数据创建另一个子div
返回html；
}

我没有给div自己编号，而是使用了每个产品提供的DB的ID。我没有包括writeProductInfo的代码，因为我认为您应该能够看到我是如何工作的。我知道您的情况将与我遇到的情况不同，但我希望这能有所帮助。
我已经弄明白了经过几次尝试和错误后出现了错误。似乎错误的原因是我的页面结构在不同的行上。例如，如果所有内容都在同一行上，它可以像这样工作

for(var i=0; i<widgetId.length; i++){

            var makePage = $("<div data-role='page' id="+widgetId[i]+"><div data-role='header' data-position='fixed'><a data-iconpos='notext' href='#' data-role='button'data-icon='flat-menu'></a> <h1>BasketBall Fanatico</h1><a data-iconpos='notext' href='#page2' data-role='button' data-icon='home' title='Home'>Home</a></div> <div data-role='content'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='b'>Raptors Score</li><li><h2>0</h2></li></ul></div></div>");

            makePage.appendTo($.mobile.pageContainer);

          }

for（var i=0；i不幸的是，我做的事情不同，我没有使用DB。