OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

変数でHTMLを指定し動的に生成する(jQuery編)

最終更新日:2018.1.7 Update!!
前回記事に引き続き、変数にHTMLを指定して出力する方法です。今回はjQueryを使ったサンプルです。jQueryを使うことで簡単かついろんなケースに柔軟に対応することができます。   【HTML】動的に生成する前
<div id="wrap">
  <div class="inner_a">コンテンツA</div>
  <script>
  <!-- ここへHTMLの変数を指定したjavascriptコードを記入 -->
  </script>
</div>
 
.append() を使う
$(function(){
  var h = '<div class="inner_b">'
        + 'コンテンツB'
        + '</div>'
        + '<div class="inner_c">'
        + 'コンテンツC'
        + '</div>';
  $("#wrap").append( h );
});
【HTML】出力ソースのイメージ
<div id="wrap">
  <div class="inner_a">コンテンツA</div>
  <!-- 指定要素の内部へ後に続くよう追加される -->
  <div class="inner_b">コンテンツB</div>
  <div class="inner_c">コンテンツC</div>
</div>
 
.prepend() を使う
$(function(){
  var h = '<div class="inner_b">'
        + 'コンテンツB'
        + '</div>'
        + '<div class="inner_c">'
        + 'コンテンツC'
        + '</div>';
  $("#wrap").prepend( h );
});
【HTML】出力ソースのイメージ
<div id="wrap">
  <!-- 指定要素内部の先頭にくるよう追加される -->
  <div class="inner_b">コンテンツB</div>
  <div class="inner_c">コンテンツC</div>
  <div class="inner_a">コンテンツA</div>
</div>
 
.html()を使う
$(function(){
  var h = '<div class="inner_b">'
        + 'コンテンツB'
        + '</div>'
        + '<div class="inner_c">'
        + 'コンテンツC'
        + '</div>';
  $("#wrap").html( h );
});
【HTML】出力ソースのイメージ
<div id="wrap">
  <!-- 指定要素内部の要素と置き換わるように追加される -->
  <div class="inner_b">コンテンツB</div>
  <div class="inner_c">コンテンツC</div>
</div>
 
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram