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

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

この記事の目次

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

script.js

$(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内に挿入しようと試みました。

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

index.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="script.js"></script>
</head>
<body>
  <div id="conteiner"></div>
</body>
</html>

conttent.html

<div id="target">
<p>hello world!!</p>
</div>

script.js

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

想定していた結果

index.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構造

index.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のみ表示されてしまうようです。

対策して修正した箇所

script.js

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

を下記に変更

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

若しくはこちら

script.js

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

まとめ

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