XMLからJSを使用して動的にHTML divを作成する

Question

私は作業中のプロジェクトの指導のようなヨーダのビットを探しています。私は動的にphpサーバーから読み込まれているXMLデータを中心にWebページにdivを生成しようとしています。私の経験の重さの上にちょっとパンチして、それは学習に良いです。誰かが限り正しい方向にチュートリアルを私を指すか、私など正しい軌道上のイム

における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本部生成

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タグの負荷の情報（）関数を呼び出し、かなり基本的なものです。

私は正しい方向に見ていますか？誰かが私を助けたり、チュートリアルを推薦できますか？

ありがとうございました

Answer 1

jQueryをお試しください。これは、あなたがやろうとしている作業を単純化します。

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

例えば

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

parentDiv.append(newDiv); 

あなたのタスクを実行するためにjqueryのを使用しての有用な例：私はここでjQueryのポップアップでこのコードを持って

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

Answer 2

これは便利コメントでコード

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