使用JS从XML动态创建HTML div

我正在寻找一个类似于尤达的项目指导。我试图在网页中根据从php服务器读取的XML数据动态生成div。我打得比我的经验重一点，这对学习有好处

我想知道是否有人能为我指出一个正确的方向作为一个教程或给我一些指导，看看我是否在正确的轨道上等

正在加载的XML im是

 <item>
      <id>1</id>
      <name>Johnothan</name>
      <message>hello world</message>
 </item>
 <item>
      <id>2</id>
      <name>Fredrico</name>
      <message>hello world</message>
 </item>...etc

JS Div生成

 function information(){

 xmlReturned =  xmlDoc.getElementsByTagName("item");

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

 newDiv(i);




 function newDiv(i){
 var id = xmlReturned[i].getElementsByTagName("id")[0].firstChild.nodeValue;
 var name = xmlReturned[i].getElementsByTagName("name")[0].firstChild.nodeValue;
 var message = xmlReturned[i].getElementsByTagName("message")[0].firstChild.nodeValue;


 //Now im trying to place the dynamic XML information within a table with in a new DIV in the HTML.



 }

函数信息（）{
xmlReturned=xmlDoc.getElementsByTagName（“项目”）；
对于（i=0；i这是我用来从JSON动态创建HTML页面元素的客户端代码

基本上，我有一个从数据库中选择的服务器端脚本。数据库包含元素ID和内部HTML文本。然后，数据在服务器端编码为JSON。在您的示例中，您使用XML，但原理相同

我将此代码保存到它自己的名为
“buildCategories.js”
的javascript文件中：

buildAjaxRequest=function（）
{
/*创建一个ajax变量*/
var ajaxRequest；
尝试
{
//Opera 8.0+、Firefox、Safari
ajaxRequest=新的XMLHttpRequest（）；
} 
捕获（e）
{
//Internet Explorer浏览器
尝试
{
ajaxRequest=newActiveXObject（“Msxml2.XMLHTTP”）；
} 
捕获（e）
{
尝试
{
ajaxRequest=新的ActiveXObject（“Microsoft.XMLHTTP”）；
} 
捕获（e）
{
/*出了点问题*/
警告（“您的浏览器不支持AJAX！”）；
/*无所事事*/
返回false；
}
}
}
返回请求；
};
buildcategories=函数（）
{
var ajaxRequest=buildAjaxRequest（）；
//运行开发箱
var url=“urltothejsonecodingscript”；
/*走，走*/
打开（“GET”，url，true）；
ajaxRequest.send（空）；
ajaxRequest.onreadystatechange=函数（）
{ 
if（ajaxRequest.readyState==4&&ajaxRequest.status==200 | | ajaxRequest.status==0）
{
var categoriesObject=JSON.parse（ajaxRequest.responseText）；
//如何检索数据的示例
//您要附加到的家长信息
var list=document.getElementById（“您想要附加到的ParentElement”）；
对于（i=0；i
 function information(){

 xmlReturned =  xmlDoc.getElementsByTagName("item");

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

 newDiv(i);




 function newDiv(i){
 var id = xmlReturned[i].getElementsByTagName("id")[0].firstChild.nodeValue;
 var name = xmlReturned[i].getElementsByTagName("name")[0].firstChild.nodeValue;
 var message = xmlReturned[i].getElementsByTagName("message")[0].firstChild.nodeValue;


 //Now im trying to place the dynamic XML information within a table with in a new DIV in the HTML.



 }

buildAjaxRequest = function()

{
/*create an ajax variable*/
var ajaxRequest; 


try
{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} 

catch (e)
{
    // Internet Explorer Browsers
    try
    {
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } 

    catch (e) 
    {
        try
        {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } 

        catch (e)
        {
            /* Something went wrong*/
            alert("Your browser does not support AJAX!");

            /* do nothing*/
            return false;
        }
    }
}
return ajaxRequest;
};


buildcategories = function()
{
var ajaxRequest = buildAjaxRequest();

  // run on development box
  var url = "urlToTheJSONEncodingScript";   

        /*go ajax go!*/
        ajaxRequest.open("GET", url, true);
        ajaxRequest.send(null); 


    ajaxRequest.onreadystatechange=function()
    { 
        if (ajaxRequest.readyState==4 && ajaxRequest.status==200 || ajaxRequest.status==0)
            {
            var categoriesObject = JSON.parse(ajaxRequest.responseText); 

            // example of how to retrive the data

            //theParentElementYouWantToAppendTo
            var list = document.getElementById("theParentElementYouWantToAppendTo");

            for (i=0;i<categoriesObject.Categories.length;i++)
            {
            newElement = categoriesObject.Categories;
            // The div you are dynamically creating 
            listRow = document.createElement("div");

            listRow.id = newElement[i].categoryID;
            listRow.innerText = newElement[i].category_desc;
            listRow.className = "theClassYouWantToUse";

                    //theParentElementYouWantToAppendTo.appendChild(theDivYouCreated)               
                    list.appendChild(listRow);


            } // end for


            }//

    }
};

buildcategories(); // VERY IMPORTANT. SELF EXECUTING FUNCTION! 

<div id="theParentElementYouWantToAppendTo">
    <script language="JavaScript" type="text/javascript" src="buildCategories.js"></script>
</div>