xmlをjQueryで読み込んで表示する時に注意すること

サンプルコード

ひとまず例として以下のコードがあります。ajaxで読み込みます。

$.ajax({
url: "xml01.xml",
async: true,
cache: false,
dataType:"xml",
success: function(xml){
$(xml).find('text').each(function(){
var text = $(this).text();
　　　　　　$('.txt01').append('<p>' + text + '</p>');
　　　});
}
});

この場合、処理のところで内容を取得するのですが、そのとき.text()で取得するとテキスト内容がそのまま表示されます。

それで問題なければそれでよいのですが、aタグなどのリンクを反映したい場合はこれではダメです。

<text><a href="#">リンク部分</a>テキスト</text>

このようなxmlを読み込む時は.text()だとリンクが反映されません。

.html()ではIEで動かない

その場合.html()を使います。これでタグも反映されます。

しかし、これだとIE9以上ではエラーが出て表示されません。dataTypeがxmlだとinnerHTMLが扱えないからのようです。ということでこの場合はdataType:”xml”を”html”にします。

• jQueryでAjaxしたXMLデータで.html()するとIEでエラー – 月夜見的な技術日記

$.ajax({
url: "xml01.xml",
async: true,
cache: false,
dataType:"html",
success: function(xml){
$(xml).find('text').each(function(){
var text = $(this).html();
　　　　　　$('.txt01').append('<p>' + text + '</p>');
});
}
});

IEで動かない（2回目）

これで大丈夫かと思いましたがdataTypeをhtmlにしてしまうと、さらにIEの古いバージョン（IE6～8）に遡ると表示されません。

ですので、やはりdataTypeはxmlに戻し.html()も.text()に戻します。このままだと先ほどと同じでタグが反映されませんので今度はxml側を修正します。

<text><![CDATA[<a href="#">リンク部分</a>テキスト]]></text>

このようにタグの中にCDATAセクションというものを入れます。こうすることできちんとリンク付きのものでも表示できます。

xmlをjQueryで読み込んで表示する方法のまとめ

試行錯誤を書いてきましたがまとめると以下になります。

• dataTypeはxml
• 内容の取得は.text()
• xmlにCDATAセクションをつける

$.ajax({
url: "xml01.xml",
async: true,
cache: false,
dataType:"xml",
success: function(xml){
$(xml).find('text').each(function(){
var text = $(this).text();
　　　　　　$('.txt01').append('<p>' + text + '</p>');
});
}
});

<text><![CDATA[<a href="">テキスト1</a>テキスト1]]></text>