dynamically creating HTML divs with JS from XML

Question

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

ysrb · Accepted Answer · 2011-07-10 07:22:34Z

1

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/

edited Jul 10, 2011 at 7:22

answered Jul 10, 2011 at 7:15

ysrb

6,7202 gold badges32 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Caspar Kleijne Over a year ago

This is a usefull comment but does not answer the OP's question. Please deliver a javascript answer or make this a comment ;)

ysrb Over a year ago

He is asking for direction / recommend a tutorial. That's what I did.

Christopher Over a year ago

Thanks for the pointer. I have been looking into jQuery however I have read it can reduce be slower then a pure js call. Is it possible to create dynamic divs in js and append them onto the page. Could you also provide an example or point me to a good js tute on it. Thanks for your time and help!

ysrb Over a year ago

@Christoper For pure JS. you can try w3schools.com/dom/met_document_createelement.asp However, I still recommend to use JQuery. It will help you in cross browser compatibility. really recommended

brymck Over a year ago

@Christopher What you need to do is parse the XML, but JavaScript does not have any native functionality to do that. Now, you can write it, but I'd really recommend a pre-packaged solution, one that's had people submitting dozens of bug reports. jQuery's $.parseXML is a great example. Also, jQuery can be slower, but it only matters if your page is extremely JS-intensive. Its parsing functions are also very robust and efficient, and it can be a real time-saver for developers. SO uses jQuery, for example. Would you consider this site's JS slow?

mbinette · Accepted Answer · 2012-10-11 00:04:59Z

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

Collectives™ on Stack Overflow

dynamically creating HTML divs with JS from XML

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related