jQueryで要素を追加するメソッドは複数あります。
知っておくといろんなUIを作るときに便利です。
どんな違いがあるかというと以下のように、追加する場所によって違います。
以下のボタンをぽちぽち押してみてください。
要素外の前に追加 (before)
要素外の後に追加 (after)
ターゲット
要素内の前に追加 (prepend)
要素内の後に追加 (append)
UIサンプルギャラリー「キプレ」
jQuery
HTML
Package
CSS
JavaScript
PHP
jQuery
HTML5
CSS3
Smarty
Twig
AngularJS
SVG
python
VueJS
BackboneJS
Blade
GoogleAppsScript
Laravel
Node.js
PWA
React
SCSS
Git
D3.js
Unix
close
MENU
用途
新着
履歴
分類
- デザイン [37]
- HTML 【基本編】 [3]
- グラフいろいろ [7]
- CSS【基本編】 [4]
- jQuery プラグイン [6]
- Apple関連 [5]
- 図形いろいろ [11]
- オーバーレイ [3]
- スクロール [11]
- クッキー [3]
- スワイプ [3]
- タブ切り替え [4]
- ajax 非同期通信 [4]
- コピー [2]
- カルーセル [3]
- 便利なウェブツール [8]
- 震える [3]
- ブラウザ制御系 [14]
- SQL [1]
- 画像 [23]
- 印刷 [2]
- JavaScript【基本編】 [5]
- htaccess [4]
- unix [1]
- jQuery【基本編】 [5]
- スマホならでは [12]
- jQuery ハマりがち [5]
- データ連携 [3]
- レスポンシブ [4]
- メニュー [6]
- リンク [1]
- アコーディオン [2]
- PHP [1]
- ローカルストレージ [1]
- めくる [2]
- フォーム [12]
- 文字が多い時 [8]
- ティッカー [2]
- モーダルウィンドウ [1]
- 配置 [13]
- ウェブ広告関連 [4]
- Google関連 [2]
- 文字を目立たせたい [6]
- 時間的な制御 [5]
- 動画 [4]
- 数字 [2]
- 色彩 [3]
- 条件分岐 [3]
- アニメーション [22]
- 絞り込みフィルター [3]
- コーディング [4]
- カメラ [3]
- viewportでできること [1]
- ライトなDB操作 [1]
- ボタン [6]
- 透過 [4]
- URL [2]
- パララックス [1]
- 変数 [1]
- ループ処理 [1]
- 音 [1]
- データサイエンス [2]
- 通信環境 [2]
- jQuery
- jQuery 画像をサイズ変更してモーダル
- jQuery 告知テキストの演出
- jQuery フォームに非同期で値をセット
- jQuery フォームの値を取得
- jQuery 独自メソッドを作る
- jQuery 狭いエリアに文字をアニメで格納する
- jQuery フォーム入力によるフィルター
- jQuery 画像遅延読み込みのサンプル
- jQuery スクロールでURLを書き換える
- jQuery 自動ドア風アニメーション
- CSS 左右に行き来するアニメーション
- jQuery 消去法のUI
- jQuery タブ（横）シンプル版
- jQuery 要素をタグで囲う
- jQuery スライドスイッチ
- jQuery クラスで一括操作
- jQuery 透明度を変更する
- jQuery コンテンツの選択と変更
- jQuery 要素のクローンを作成
- jQuery 入力フォームの変更時に発動させる
- jQuery フォームをフォーカスする、はずすで発動
- jQuery 非同期通信の完了検知
- jQuery 要素を追加・移動する
- jQuery 要素を追加するいろんな方法
- jQuery 同じ処理の部分だけまとめる
- jQuery 使ってしまいそうな非推奨のメソッド
- jQuery マウスオーバーで画像入れ替え
- jQuery 長押しで発動
- 広告費の指標「ROI」
- 広告費の指標「ROAS」
- 広告費の指標「CPA」
- jQuery フェードインアウト
- jQuery 処理を遅らせる
- CSS3 やわらかい動き
- jQuery キーを押されたら実行
- jQuery 日付指定
- jQuery BMIの計算ツール
- jQuery 画像読み込んでから発火
- jQueryとCSS カードをクリックでめくる表現
- jQuery スクロールでクラス付加、解除
- jQuery マウスのトリガーいろいろ
- JS 緯度経度を取得する
- jQuery クラスをSVGタグに追加、変更
- jQuery 要素のスライド
- URLエンコード、デコードツール
- jQuery iframeを後から読み込み
- jQuery JSONの読み込み
- jQuery 処理の実行
- jQuery 指定の高さを超えたらボタンを表示
- jQuery メディアクエリと同様の出し分け
- jQuery パララックス 簡易版
- jQuery スタイルの数値取得
- jQuery メニューのトグルボタン
- jQuery スクロールで移動速度を変える
- jQuery 画像のコピー防止の比較
- jQuery 文字数に応じてスタイル変更
- jQuery デバイス判別
- jQuery 右クリックを画像ごとに制御
- jQuery アコーディオンメニュー
- jQuery オーバーレイ スマホ版
- jQuery HTMLの属性を指定して編集
- jQuery Cookieで表示回数制限
- jQuery スムーズスクロール
- jQuery レスポンシブデザイン
- jQuery IDやClass指定でスタイルを変える
- jQuery クッキーに保存
- jQuery 時差読込レイジーロード
- jQuery ツールチップ
- CSS3 オンマウスで画像拡大
- jQuery カラーピッカー
- jQuery カードをめくる表現
- jQuery ドロワーメニュー
- jQuery プルダウン
- jQuery フォームの値を取得する
- jQuery スクロールで表示
- jQuery オーバーレイ
- jQuery テキストティッカー
- jQuery IDを取得する
- jQuery スクロール最下部を検知
- jQuery 「.live」メソッドは使わない
- jQuery 一覧の絞り込み
- jQuery 離脱時に警告を出す
- jQuery 初めてのjQuery
- jQuery タブ（横・縦）
- jQuery カルーセル
- jQuery ウィンドウ操作
- jQuery モーダルウィンドウ
- jQuery スクロールでヘッダー表示
- jQuery パララックス基本動作
- HTML
- Package
- CSS
- JavaScript
- PHP
- SVG
- python
- GoogleAppsScript
- PWA
- Git
- Unix
- デザイン [37]
- HTML 【基本編】 [3]
- グラフいろいろ [7]
- CSS【基本編】 [4]
- jQuery プラグイン [6]
- Apple関連 [5]
- 図形いろいろ [11]
- オーバーレイ [3]
- スクロール [11]
- クッキー [3]
- スワイプ [3]
- タブ切り替え [4]
- ajax 非同期通信 [4]
- コピー [2]
- カルーセル [3]
- 便利なウェブツール [8]
- 震える [3]
- ブラウザ制御系 [14]
- SQL [1]
- 画像 [23]
- 印刷 [2]
- JavaScript【基本編】 [5]
- htaccess [4]
- unix [1]
- jQuery【基本編】 [5]
- スマホならでは [12]
- jQuery ハマりがち [5]
- データ連携 [3]
- レスポンシブ [4]
- メニュー [6]
- リンク [1]
- アコーディオン [2]
- PHP [1]
- ローカルストレージ [1]
- めくる [2]
- フォーム [12]
- 文字が多い時 [8]
- ティッカー [2]
- モーダルウィンドウ [1]
- 配置 [13]
- ウェブ広告関連 [4]
- Google関連 [2]
- 文字を目立たせたい [6]
- 時間的な制御 [5]
- 動画 [4]
- 数字 [2]
- 色彩 [3]
- 条件分岐 [3]
- アニメーション [22]
- 絞り込みフィルター [3]
- コーディング [4]
- カメラ [3]
- viewportでできること [1]
- ライトなDB操作 [1]
- ボタン [6]
- 透過 [4]
- URL [2]
- パララックス [1]
- 変数 [1]
- ループ処理 [1]
- 音 [1]
- データサイエンス [2]
- 通信環境 [2]
jQuery 要素を追加するいろんな方法
jQuery 要素を追加するいろんな方法
ページを表示したり、ボタンを押したりしたとき、画像やテキストなど要素を追加するサンプルです。
それぞれのJSはこちら
$('#before_btn').on('click',function(){
//要素外の前に追加 (before)
$("#demo_box").before("<span>before</span>");
});
$('#after_btn').on('click',function(){
//要素外の後に追加 (after)
$("#demo_box").after("<span>after</span>");
});
$('#prepend_btn').on('click',function(){
//要素内の前に追加 (prepend)
$("#demo_box").prepend("<span>prepend</span>");
});
$('#append_btn').on('click',function(){
//要素内の後に追加 (append)
$("#demo_box").append("<span>append</span>");
});
要素の追加する部分のHTMLはこちら
<hr> <div class="demo_btn" id="before_btn">要素外の前に追加 (before)</div> <div class="demo_btn" id="after_btn">要素外の後に追加 (after)</div> <hr> <div id="demo_space"> <div id="demo_box"> <span id="demo_text">ターゲット</span> </div> </div> <hr> <div class="demo_btn" id="prepend_btn">要素内の前に追加 (prepend)</div> <div class="demo_btn" id="append_btn">要素内の後に追加 (append)</div>
最後に、ややこしいので、insertBeforeとinsertAfterのメソッドも別サンプルで用意しました。
要素外の前に追加 (insertBefore)
要素外の後に追加 (insertAfter)
ターゲット
何が違うのかというと、「何」を「どこ」に入れるかという記述の順序が変わります。
$('#insertBefore_btn').on('click',function(){
//要素外の後に追加 (insertBefore)
$("<span>insertBefore</span>").insertBefore("#demo_box2");
});
$('#insertAfter_btn').on('click',function(){
//要素外の後に追加 (insertAfter)
$("<span>insertAfter</span>").insertAfter("#demo_box2");
});
関連するサンプル
Top