动态与JS从​​XML创建HTML的div [英] dynamically creating HTML divs with JS from XML

问题描述

林找了一下尤达像一个项目进出口工作的指导。我试着去动态生成div的在围绕XML数据的网页是从一个PHP服务器读取。林冲了一下上面我的经验重量，这是很好的学习。

Im looking for a bit of Yoda like guidance on a project im working on. Im trying to dynamically generate div's in a web page based around XML data which is read in from a php server. Im punching a bit above my experience weight which is good for learning.

在想，如果有人能在正确的方向指向我就一个教程或给我一些指导，看看即时通讯在正确的轨道等。

Was wondering if someone could point me in the right direction as far a tutorials or give me some guidance to see if im on the right track etc.

XML的即时负载的是......

The XML im loading in is...

  <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

我的Ajax调用的函数。

My Ajax function to call.

  function ajax(site, params){
  var xmlhttp;
  var i;
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
     xmlhttp=new XMLHttpRequest();
   }
   else
  {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }
      xmlhttp.onreadystatechange=function()
   {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
  xmlDoc=xmlhttp.responseXML;   
     }
   } 


   xmlhttp.open("POST", site, false);
   xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');


    xmlhttp.send(params);
    } 

JS事业部代

JS Div generation

   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.



   }

我的HTML是pretty的基本调用的body标签加载信息（）函数。

My HTML is pretty basic it calls the information() function with the body tag loads.

我在正确的方向看？有人可以帮我出或推荐教程？

Am I looking in the right direction?? Can someone help me out or recommend a tutorial?

感谢您的时间

推荐答案

尝试使用jQuery。它简化了您正在尝试做的任务。

Try using jQuery. It simplifies the task that you are trying to do.

http://api.jquery.com/category/manipulation/

例如：

var newDiv = $('<div/>').text(sampleText);

parentDiv.append(newDiv);

使用jQuery做你的任务有用的例子：

Useful example of using jquery to do your task:

http://think2loud.com/224-reading-xml-with-jquery /

这篇关于动态与JS从​​XML创建HTML的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！