динамическое создание HTML-дивов с помощью JS из XML

Question

Я ищу Йоду как руководство по проекту, над которым я работаю.Я пытаюсь динамически генерировать div на веб-странице, основанной на данных XML, которые считываются с php-сервера.Я пробиваю немного выше своего веса опыта, который хорош для обучения.

Интересно, может ли кто-нибудь направить меня в правильном направлении в качестве учебного пособия или дать мне некоторое руководство, чтобы увидеть, нахожусь ли я на правильном пути и т.д.

XML, который я загружаю в это ...

  <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 довольно простой, он вызывает функцию information () с загрузкой тега body.

Я смотрю в правильном направлении ??Кто-нибудь может мне помочь или порекомендовать учебник?

Спасибо за ваше время

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