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

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

最終更新日: 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

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram