Javascript JS读取一个XML文件，为几个div编写HTML代码，然后重复它自己，直到它到达列表的末尾

我想更新下一页以便更容易维护。（提示：有最多包含九个正方形的面板。单击左侧或右侧的灰色条可进入下一个面板。）

目前，如果我想添加一个表单，我必须更新HTML，这会变得很混乱。相反，我希望维护一个列出所有表单的XML文件。HTML文件将包含一个脚本，该脚本根据XML的内容为我编写HTML代码

HTML有一个主div（称为panel_wrap）。面板_wrap div包含上一个/下一个导航div和九个方形div（称为方形）。我希望javascript执行以下操作：

创建一个面板包装div

用上一个/下一个div填充panel_wrap div。（我不介意必须独立更新这些。）

用九个正方形（XML文件中的项目1到9）填充面板_wrap div

创建一个具有唯一id的新面板包装div

重复步骤2

重复步骤3，但XML文件中的项目10到19

继续，直到到达XML文件的末尾

skinny:因此，基本上，我需要脚本来创建一个主div，用其他九个div（来自XML文件）填充该主div，然后重复该过程，直到到达列表的末尾

可能吗

下面是XML列表的示例：

<?xml version="1.0" encoding="UTF-8"?>
<forms>
    <form>
        <name>Form 1</name>
        <subjectCategory>Form1</subjectCategory>
    </form>
    <form>
        <name>Form 2</name>
        <subjectCategory>Form2</subjectCategory>
    </form>
    <form>
        <name>Form 3</name>
        <subjectCategory>Form3</subjectCategory>
    </form> <form>
        <name>Form 4</name>
        <subjectCategory>Form4</subjectCategory>
    </form> <form>
        <name>Form 5</name>
        <subjectCategory>Form5</subjectCategory>
    </form> <form>
        <name>Form 6</name>
        <subjectCategory>Form6</subjectCategory>
    </form> <form>
        <name>Form 7</name>
        <subjectCategory>Form7</subjectCategory>
    </form> <form>
        <name>Form 8</name>
        <subjectCategory>Form8</subjectCategory>
    </form> <form>
        <name>Form 9</name>
        <subjectCategory>Form9</subjectCategory>
    </form> <form>
        <name>Form 10</name>
        <subjectCategory>Form10</subjectCategory>
    </form> <form>
        <name>Form 11</name>
        <subjectCategory>Form11</subjectCategory>
    </form> <form>
        <name>Form 12</name>
        <subjectCategory>Form12</subjectCategory>
    </form> <form>
        <name>Form 13</name>
        <subjectCategory>Form13</subjectCategory>
    </form> <form>
        <name>Form 14</name>
        <subjectCategory>Form14</subjectCategory>
    </form> <form>
        <name>Form 15</name>
        <subjectCategory>Form15</subjectCategory>
    </form> <form>
        <name>Form 16</name>
        <subjectCategory>Form16</subjectCategory>
    </form> <form>
        <name>Form 17</name>
        <subjectCategory>Form17</subjectCategory>
    </form> <form>
        <name>Form 18</name>
        <subjectCategory>Form18</subjectCategory>
    </form> <form>
        <name>Form 19</name>
        <subjectCategory>Form19</subjectCategory>
    </form> <form>
        <name>Form 20</name>
        <subjectCategory>Form20</subjectCategory>
    </form> <form>
        <name>Form 21</name>
        <subjectCategory>Form21</subjectCategory>
    </form> <form>
        <name>Form 22</name>
        <subjectCategory>Form22</subjectCategory>
    </form>
</forms>

表格一
表格1
表格二
表格2
表格三
表格3
表格四
表格4
表格五
表格5
表格六
表格6
表格7
表格7
表格八
表格8
表格九
表格9
表格10
表格10
表格11
表格11
表格12
表格12
表格13
表格13
表格14
表格14
表格15
表格15
表格16
表格16
表格17
表格17
表格18
表格18
表格19
表格19
表格20
表格20
表格21
表格21
表格22
表格22

下面是一个我开始使用的脚本，但它不会在需要时创建新的panel_wrap div。它只是在XML列表中继续，直到到达末尾。最后，我在一个面板中看到了一堆正方形

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","test.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

var x=xmlDoc.getElementsByTagName("form");
for (i=0;i<x.length;i++)
  { 
  document.write("<div class='square'>");
  document.write("<p class='labels'>");
  document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + "</p>");
  document.write("</div>");
  }

if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
open（“GET”，“test.xml”，false）；
xmlhttp.send（）；
xmlDoc=xmlhttp.responseXML；
var x=xmlDoc.getElementsByTagName（“表单”）；
对于（i=0；i所以，在朋友的帮助下，我完成了我需要做的事情。（虽然还有一些调整，但这给了我所需要的基本结构。）


if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
open（“GET”，“forms.xml”，false）；
xmlhttp.send（）；
xmlDoc=xmlhttp.responseXML；
var j=0；
var x=xmlDoc.getElementsByTagName（“表单”）；
面板=x.length/9；
控制台日志（面板）；
对于（h=0；hYou真的应该看看现有模板库中的一些，比如underline.js。正如@Diodeus所建议的，库和框架可能更好。我建议你看看Angular。还有，为什么XML？JSON更容易从浏览器中解析和使用。谢谢你的回复，@Diodeus。我将浏览underline.js，但我恐怕我没有如果我看到某个解决方案，我将无法识别它。请您提供一些搜索词，或者帮助我重新表述我的问题，使其更有意义。再次感谢。
<script>
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","forms.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

var j=0;
var x=xmlDoc.getElementsByTagName("form");
panel = x.length/9;

console.log(panel);

for (h=0;h<panel;h++){
  document.write("<div class='panel_wrap' id='ius'>");
  document.write("<div class='previous' id='nav'>");
  document.write("</div>");
  document.write("<div class='next' id='nav'>");
  document.write("<a href='#ius2'></a>");
  document.write("</div>");

  for (i=0;i<9;i++)
    { 
    document.write("<div class='square'>");
    document.write("<p class='labels'>");
    document.write(x[j].getElementsByTagName("name")[0].childNodes[0].nodeValue + "</p>");
    document.write("</div>");
    j++;
    }
  document.write("</div>");
  }
</script>