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

Javascript

xmlを利用してコンテンツを表示したりすることがあると思いますが、今回はその方法のメモです。

サンプルコード

ひとまず例として以下のコードがあります。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"にします。

$.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>