從XML動態創建HTML div與來自XML的JS

我正在尋找一點Yoda像一個項目即時通訊工作的指導。我試圖動態生成在基於XML數據從PHP服務器讀入的網頁的div。我衝在我的體重上面，這對學習很有幫助。從XML動態創建HTML div與來自XML的JS

想知道，如果有人可以點我在正確的方向就一個教程或給我一些指導，看看IM在正確的軌道上等

的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事業部代

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是非常基本的調用與身體標籤加載信息（）函數。

我在尋找正確的方向？有人可以幫我解決或推薦一個教程嗎？

感謝您的時間

來源

2011-07-10 Christopher

嘗試使用jQuery。它簡化了您正在嘗試完成的任務。

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

EG。

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

parentDiv.append(newDiv);

使用jQuery做你的任務的有用的例子：

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

來源

2011-07-10 07:15:06 ysrb

這是一個有用的評論，但沒有回答OP的問題。請提供一個JavaScript的答案或使這個評論;） –

他要求的方向/推薦教程。這就是我所做的。 – ysrb

感謝您的指針。我一直在研究jQuery，但是我已經讀過它可以減慢然後純粹的js調用。是否有可能在js中創建動態div並將它們追加到頁面上。你能不能提供一個例子，或者指出我有一個很好的例子。感謝您的時間和幫助！ – Christopher

我在這裏一個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(); 
});

來源

2012-07-25 21:02:58 raul

從XML動態創建HTML div與來自XML的JS

回答

相關問題