変数で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>
sponserd
keyword search
recent posts
- GSAPとvivusを使ったSVGのドローアニメーション
GSAPとvivusを使ったSVGのドローアニメーション
- GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
GSAPでScrollTriggerプラグインを使ったスクロール固定表示アニメーションの応用
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
categories