jqueryでxmlを読み込んでコンテンツを表示します。

デモページへopen_in_new

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/xmldata.js"></script> 

[xmldata.js]JavaScript

$(function(){
	
function fresh(){
	var dlbody = $("#news");
	$.ajax({
    type: 'GET',
		url: 'list.xml',
		dataType: 'xml',
		success: function(xml){
			var newslist = $(xml);
			newslist.find('item').each(function(i){
        i = i + 1;
        if(i == 6) {
            return false;
        }
				var newsitem = $(this);
				var newsitem_title = newsitem.find('title').text();
				var newsitem_date = newsitem.find('date').text();
				var newsitem_link = newsitem.find('link').text();
				var dt = $('<dt />').text(newsitem_date);
				//var ddlink = $('<a />').text(newsitem_link);
				var dd = '<dd><a href="'+newsitem_link+'">'+newsitem_title+'</a></dd>';

				dlbody.append(dt);
				dlbody.append(dd);
			});
		}
	});
}

fresh();

});

HTMl

<div class="mod_news">
<dl id="news">
</dl>
<!-- /mod_news --></div>

CSS

/* mod_news
-----------------------------------------*/
.mod_news{
  margin:50px 0 0 0;
}
.mod_news dl{
  position:relative;
  overflow:hidden;
}
.mod_news dt{
 float:left;
 width:130px;
 padding:15px 0 0 0;
}
.mod_news dd{
 border-bottom:dotted 1px #CCCCCC;
 padding:15px 0 10px 130px;
 line-height:1.3;
}