PR

jQueryで外部HTMLの一部をloadする冴えたやり方(嘘でした)

javascript

jQueryのAjaxを使って外部HTMLの一部を抜き出し挿入する

ここに書いたことなんですが、まぁせっかくなんで。ブログにも書いておこう。

var jqueryDom = $('<output>').append($.parseHTML($.ajax({type: "GET", url: url, async: false}).responseText));
var rows = $('#data-sourse tbody tr', jqueryDom);
$('#target-table tbody').append(rows);

こんな書き方ができる!
parseHTMLをすると、なんか変なDOMの配列が帰ってくるのでjQueryのAPIが使えないのが大変面倒くさかったわけですけれども、こののようなダミーのタグにデータをぶち込んでjQueryオブジェクトを作ってあげるとあら不思議、画面のDOMに関係のないjQueryの使えるDOMが作れるのでした。
Qiitaの方のコメントでやり取りした結果、アホな思い違いをしていただけでした。

ちょっとしたShadowDOM的な?
開発していたアプリケーションの関係でこういうテクニックが必要になったので必要にかられて発見・検証した技ですが、今後も何かと使えそうな技です。
load関数自体もセレクタによる絞込が出来るのでそれで済む場合もあるんですが、ページネーションになっている各ページのデータをループで吸い上げるみたいなことをするにはこの書き方が便利。
っていうかぶっちゃけそのためにこれを開発しました。

ただちょっと思うのは、こういうマジで数行で終わってしまうプログラム上のtipsを書いた投稿の場合、SEO的にどうなんだろうという話。多分良くないよね。

コメント

タイトルとURLをコピーしました