新着ニュースの更新などで良く使う、xmlファイルの読み込みを実装しました。
今回はjQueryでhtmlを追加する書き方をしています。

まず、htmlを用意します。
日付とテキストリンクを更新するシンプルな表示です。

<ul class="linkbox-news">
 <li>
  <time>16.01.23</time>
  <p>
   <a href="#" taeget="_blank">タイトルやコピーが入ります</a>
  </p>
 <li>
</ul>

jQueryで書き出す部分を削除し、外側のulタグを残します。

<ul class="linkbox-news"></ul>

xmlは次のような記述です。
日付、URL、テキストリンクの文言が更新できるように設定しています。

<?xml version="1.0" encoding="utf-8"?>
<news>
    <item>
        <time>16.01.15</time>
        <link>#</link>
        <article>ダミーダミーダミー01</article>
    </item>
    <item>
        <time>16.02.20</time>
        <link>#</link>
        <article>ダミーダミーダミー02</article>
    </item>
    <item>
        <time>16.02.30</time>
        <link>#</link>
        <article>ダミーダミーダミー03</article>
    </item>
</news>

jQueryは次のように記述しました。
jQuery.ajax() を使い、$.ajax({dataTyle: 'xml'})とすればxmlファイルを読み込むことができます。
$('item', data) で取得したXML内の<item>の情報を抽出します。

$(function() {
    $.ajax({
        url: 'news.xml',
        dataType: 'xml',
        success: function(data) {
            // NEWSページ

            var insertContents = '';
            $('item', data).each(function() {
                var thisItem = $(this);
                insertContents += '<li>';
                insertContents += '<time>';
                insertContents += thisItem.children('time').text();
                insertContents += '</time>';
                insertContents += '<p>';
                insertContents += '<a href="' + thisItem.children('link').text() + '" target="_blank">';
                insertContents += thisItem.children('article').text();
                insertContents += '</a>';
                insertContents += '</p>';
                insertContents += '</li>';
            };
            $('.linkbox-news').append(insertContents);
        }
    });
});

追加するhtmlは変数insertContentsに代入されている内容です。
変数insertContentsに1行ずつ追加していき、<li></li>までを表示させます。
<item>の個数分のhtmlを<ul class="linkbox-news"></ul>内に繰り返し追加します。

実装すると下記のサンプルのようにhtmlで表示されます。
※cssは指定していません。

・サンプル