【意外と知らない】jQueryで別ページのhtmlを取得してDOM操作する方法

Web2018年3月23日

.load()メソッドを使った別ファイルのhtml取得はとても簡単ですが、「共通化や自動更新はしたいけどちょっとマークアップを変えたい」「同じ要素なんだけどもページごとに違う使い方をしたい」という場合、.load()メソッドだと限界があります。

そんな時、ajaxで別ページの要素を取得してDOM操作できると色々捗ります。本記事では、ajaxを活用した別ページのhtml取得方法についてご紹介させていただきたいと思います。

サンプルコード

以下のようにdataType:'html'でajax通信することで、簡単に別ページのDOMが取得できます。

※ただし同ドメインのページに限ります（クロスドメイン不可）

$(function(){
  'use strict';

  $.ajax({
    type:'GET',
    url:'/about/',
    dataType:'html'
  })
  .then(

    //通信成功時
    function(data){
      var contents = $(data).find('h1.hdg-l1-01').next();
      $('.hoge').append(contents);
    },
  
    //通信失敗時
    function(){
      alert("読み込み失敗");
  });
});

上記は単純に取得した要素を.hogeの中に放り込んでいるだけなので、.load()と対してやっていることは変わりませんが、DOM操作してからappendすることで、同じ要素でも全く違った見せ方にすることもできます。

例えば以下のサンプルコードでは、/about/のH1テキストを取得して文字列を置換し、さらにリンクリストモジュールの形式にDOM操作してからappendしています。

$(function(){
  'use strict';

  $.ajax({
    type:'GET',
    url:'/about/',
    dataType:'html'
  })
  .then(

    //通信成功時
    function (data) {
      var contents = $(data).find('h1.hdg-l1-01').next().text();
      contents = contents.replace(contents,'サイトについて');
      contents = '<ul class="list-link-01"><li><a href="/about/">' + contents + '</a></li></ul>';
      $('.moge').append(contents);
    },
  
    //通信失敗時
    function () {
      alert("読み込み失敗");
  });
});

※jQueryを読み込んでいる場合のスクリプトとなります

解説

ajaxで取得したオブジェクトはdataに格納されます。あとは取得したい任意の要素に$(data)〜でアクセスするだけです。同ページ内にある要素と同じ感覚で扱うことができるようになります。

わかりづらくなりそうだったのであえて用意しませんでしたが、例えばfor文やeach()を活用し、複数ある要素をAのページではリストで見せているんだけど、Bのページではセレクトボックスとして扱いたい、などの場合にこの手法は力を発揮します。

「Aのページをメンテナンスすれば体裁の違うBのページも勝手に更新される」という仕組みを、ちょっとしたスクリプトを書けば作り出すことができるわけです。

.load()を使っても似たようなことはできなくも無いですが、処理としては.load()後に要素を取得して一旦非表示にして、DOM操作してからまたappend、みたいなことをやらなきゃなのでコードも増えますし、処理としては美しくないんですよね。

※決して.load()をディスっているわけではない

また、PCとスマートフォン用で別々にhtmlを用意しているサイトなどの場合、新着情報やお知らせにおいて、「PCサイトを更新すればスマートフォンも更新される」といった仕組みで運用工数を減らす活用方法もあります。

デモ

実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。

jQueryで別ページのhtmlを取得してDOM操作する方法

まとめ

以上、別ページのhtmlを取得してDOM操作する方法をご紹介させていただきました。実際、サイトの機能としてこういったものを実装するケースはあまりないと思います。

しかし「ajaxを使って別ページのhtmlを簡単に扱うことができる」ということを知っておくと、いざという時に実装の解決の糸口になる可能性もありますので、知っておいて損はないです。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

無名さん

2019年9月19日

非常に参考になりました。
１点、訂正が必要な点があるかと思ったのでコメントさせていただきます。

> ‘use scrict’;

こちらの”scrict”は正しくは”strict”ではないでしょうか？
ご確認いただければ幸いでございます。

ありがとうございました。

admin さん

2019年9月20日

＞無名さん
ご指摘いただきありがとうございます、記述を修正させていただきました。

この記事にコメントする

※承認制のため、即時には反映されません。