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

「サイトについて」のリード文を取得して表示

<div class="hoge"><p></p></div>

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

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

「サイトについて」のリード文を「サイトについて」に置換しさらにリンク化

<div class="moge"></div>

$.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>';
  },
  
  //通信失敗時
  function () {
    alert("読み込み失敗");
});

デモの解説記事に戻る