jQueryを用いて別のWebサイトから一部を抜き出し挿入する

調べると色々出てくるのですが，自分の環境ではどれもうまく動かなかったので，うまくいった例を共有します．

使用環境は次の通りです．

• firefox 50.0

---

外部サイトにアクセスする

まず，Ajaxで行うという前提ですが，次のようなコードを書いたとします．

$.ajax({
    url: 'http://qiita.com/tags/Python',
    type: 'GET',
    success: function(data) {
      console.log("success!");
    }
  });

これを実行すると，次のようなエラーが出ました．

クロスオリジン要求をブロックしました: 同一生成元ポリシーにより、http://qiita.com/tags/Python にあるリモートリソースの読み込みは拒否されます

どうやら クロスオリジン HTTP リクエスト というものを行う必要があるらしく（私もよくわかっていないのですが）調べると次のサイトが出てきました．

どうやら，https://github.com/padolsey-archive/jquery.fn/blob/master/cross-domain-ajax/jquery.xdomainajax.js をダウンロードして読み込むと，うまくいくそうです．

これで"success!"とのログが出るので，サイトのアクセスはうまくいきました．

---

サイトから取ってきたデータを処理して追加する

次にサイトから返ってきたデータをHTMLにパースし，必要なデータを切り出す必要があります．

方法を探すと http://qiita.com/yumetodo/items/00b37234cb86e741f0fb が見つかったのですが，次のようなコードを書いたところ動作しませんでした（これが間違っていたら申し訳ないです…）

$(function() {
    $.ajax('http://qiita.com/tags/Python', {
        timeout : 1000, // 1000 ms
        datatype:'html'
    }).then(function(data){
        var out_html = $($.parseHTML(data));//parse
        $('#container').empty().append(out_html.filter('.tagShowTopList_targetName a')[0].innerHTML);//insert
    });
});

TypeError: out_html.filter(...)[0] is undefined

というエラーが出てしまうんですよね…

先ほどのサイト（http://konbu13.hatenablog.com/entry/2014/03/23/122606
）に則ってやると，うまく切り出せましたが，一度HTMLをサイト内に展開する必要があり美しくないかなと思い，別の方法を模索した結果，

$(function() {
  $.ajax({
    url: 'http://qiita.com/tags/Python',
    type: 'GET',
    success: function(data) {
      var out_html = $($.parseHTML(data.responseText));
      $('#container').empty().append(out_html.find('.tagShowTopList_targetName a'));

    }
  });
});

とすれば動くことがわかりました（画像のサイズが統一されていないですが…）
変更点は，

• $($.parseHTML(data) => $($.parseHTML(data.responseText))
• filter関数 => find関数

です．

私はJavaScript初心者なのでどうしてサイトの方法では動かなかったのかわかりませんでしたが，判明し次第追記したいと思います．