2012-01-13 215 views
0

我想將XML添加到我的HTML頁面。我希望主題顯示爲'h3',顯示爲'p'的內容以及顯示在'a href'內的網址。如何將XML添加到帶有超鏈接的HTML頁面

XML

<linkedin> 
<discussion> 
    <topic>This is the discussion name</topic> 
    <content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ligula mi, convallis eget iaculis id, euismod non arcu. Morbi porta.</content> 
    <url>http://www.linkedin.com/groups/</url> 
</discussion> 

以下是我想的輸出HTML一下:

<h3>This is the discussion name</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ligula mi, convallis eget iaculis id, euismod non arcu. Morbi porta.</p> 
<a href="http://www.linkedin.com/groups/"></a> 

非常感謝,我希望的是什麼,我停留在這個解釋說得通。

+1

不,這沒有任何意義。你究竟是什麼「卡在」?你目前如何嘗試添加XML? – Pointy 2012-01-13 15:26:19

+0

你想把XML轉換成HTML嗎? – Jonathan 2012-01-13 15:29:04

+0

我只是喜歡從任何HTML頁面上顯示的XML文件中的,。我只需要知道HTML將從XML文件中提取這些信息是什麼? – Tim 2012-01-13 15:29:10

回答

0

注意:這是如此簡單。它不處理任何子節點不存在的情況。

只是爲了讓你開始使用ajax請求。

HTML

<!DOCTYPE> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script type = "text/javascript" src = "script.js" defer = "defer"></script> 
</head> 
<body> 

</body> 
</html> 

JS(的script.js)

function getXML() { 
    var xmlhttp,xmlDoc; 
    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 
    } 
    else {// code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.open("GET", "your-xml-file.xml", false); 
    xmlhttp.send(); 
    xmlDoc = xmlhttp.responseXML; 
    showDiscussions(xmlDoc); 
} 

function showDiscussions(xmlDoc) { 
    var discHolder = document.createElement("DIV"), 
     disc = xmlDoc.getElementsByTagName("discussion"); 
    for (var i = 0, j = disc.length; i < j; i++) { 
     var topic = document.createElement("h3"), 
      content = document.createElement("p"), 
      url = document.createElement("a"); 

     topic.innerHTML = disc[i].getElementsByTagName("topic")[0].childNodes[0].nodeValue; 
     discHolder.appendChild(topic); 
     content.innerHTML = disc[i].getElementsByTagName("content")[0].childNodes[0].nodeValue; 
     discHolder.appendChild(content); 
     url.href = disc[i].getElementsByTagName("url")[0].childNodes[0].nodeValue; 
     url.innerHTML = disc[i].getElementsByTagName("url")[0].childNodes[0].nodeValue; 
     discHolder.appendChild(url); 

    } 

    document.body.appendChild(discHolder); 
} 

getXML(); 

我也會推薦使用jquery