前回記事に引き続き、変数に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>