dynamically creating HTML divs with JS from XML

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.

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

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



   }

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?

Thanks for your time

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

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

Eg.

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

parentDiv.append(newDiv);

Useful example of using jquery to do your task:

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

i have this code in a jquery popup here is the code

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();
});