Question

我正在寻找一些Yoda，就像我正在进行的项目的指导一样。我试图基于从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

我的Ajax函数调用。

  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 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.



   }

我的HTML非常基本，它在加载body标签时调用了information（）函数。

我正朝着正确的方向前进吗？有人可以帮助我或推荐一个教程吗？

感谢您的时间

Answer 1

尝试使用jQuery。它简化了您尝试执行的任务。

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

例如

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

parentDiv.append(newDiv);

使用jquery完成任务的有用示例：

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

Answer 2

我在jquery弹出窗口中有这个代码，这里是代码

jQuery(document).ready(function(){
    var showmask = function() {
        var dialogLeft = ((jQuery(window).width() - jQuery("#outerFbDialog").outerWidth()) / 2) + jQuery(window).scrollLeft() + "px";
        var dialogTop = "100px";
        /* uncomment this to place dialog in the center of window.
        var dialogTop = ((jQuery(window).height() - jQuery("#outerFbDialog").outerHeight()) / 2) +  jQuery(window).scrollTop()  +"px";
        */
        jQuery("#themask").css({'width':jQuery(window).width(),'height':jQuery(document).height()});
        jQuery("#themask").fadeTo('slow',0.7);
        jQuery("#outerFbDialog").css({'left': dialogLeft,'top':dialogTop});
        jQuery("#outerFbDialog").show();
        $('#themask').click(function () {
            jQuery(this).hide();
            jQuery("#outerFbDialog").hide();
        });             
    }

    // check for escape key 
    $(document).click(function(e) { 
        jQuery("#themask").hide();
        jQuery("#outerFbDialog").hide();        
    });
    showmask();
});

使用XML从JS动态创建HTML div

2 个答案: