Ajaxで取得したHTMLを挿入する方法

Pocket
LINEで送る

ajaxで別ページのHTMLを取得して、指定したDOMの中に挿入する時に、ajaxで指定したDOM全体を挿入するときにつまづいたので、その備忘録です。

修正版のajaxのコードはこちら

$(function(
$.ajax({
 type: 'GET',
 url: 'content.html', // 呼び出すURL
 dataType: 'html',
 success: function(data) {
    $('#conteiner').html(data.find('#target').outerHTML);
    // content.html の id="target" の要素を、
    // script.js を呼び出したページの id="conteiner" に挿入します。
 }
 });
));

ajaxを利用して別のページからHTMLを取得

ajaxを利用してcontent.htmlのHTMLを、index.htmlの#conteinerのDOM内に挿入しようと試みました。

最初に書いたコードは以下になります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テスト</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>
<body>
  <div id="conteiner"></div>
</body>
</html>
<div id="target">
<p>hello world!!</p>
</div>
$(function(
$.ajax({
 type: 'GET',
 url: 'content.html',
  dataType: 'html',
  timeout: 3000,
 success: function(data) {
   $('#conteiner').html(data.find('#target').html());
 }
 });
));

想定していた結果

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テスト</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="funct.js"></script>
</head>
<body>
  <div id="conteiner">
    <div id="target">
      <p>hello world!!</p>
    </div>
  </div>
</body>
</html>

実際に動作後のHTML構造

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>テスト</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="funct.js"></script>
</head>
<body>
  <div id="conteiner">
      <p>hello world!!</p>
  </div>
</body>
</html>

ajaxでセレクターに指定した『#target』は含まれず、『#target』の中の要素だけが抜き取られる結果になりました。

上手くいかなかった点

『find』で取得した要素をそのまま『.html()』で挿入するだけでは、セレクターに指定した要素は含まず、包含されたHTMLのみ表示されてしまうようです。

対策して修正した箇所

$(function(
$.ajax({
 type: 'GET',
 url: 'content.html',
 dataType: 'html',
 success: function(data) {
   $('#conteiner').html(data.find('#target').html());
 }
 });
));

を下記に変更

$(function(
$.ajax({
 type: 'GET',
 url: 'content.html',
 dataType: 'html',
 success: function(data) {
   $('#conteiner').html(data.find('#target').outerHTML);
 }
 });
));

若しくはこちら

$(function(
$.ajax({
 type: 'GET',
 url: 'content.html',
 dataType: 'html',
 success: function(data) {
   $('#conteiner').html(document.getElementById('#target'));
 }
 });
));

まとめ

javascriptのメソッドの『getElementById』と『find()』で呼び出す要素はちょっと違うんですね。勉強になりました。。

SNSでもご購読できます。