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