[解決済み] 最初の子として要素を挿入するには?
2022-10-17 02:09:51
質問
ボタンをクリックするたびにjqueryでdivを先頭要素に追加したい。
<div id='parent-div'>
<!--insert element as a first child here ...-->
<div class='child-div'>some text</div>
<div class='child-div'>some text</div>
<div class='child-div'>some text</div>
</div>
どのように解決するのですか?
以下のように
$.prepend()
という関数を使ってみてください。
使用方法
$("#parent-div").prepend("<div class='child-div'>some text</div>");
デモ
var i = 0;
$(document).ready(function () {
$('.add').on('click', function (event) {
var html = "<div class='child-div'>some text " + i++ + "</div>";
$("#parent-div").prepend(html);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent-div">
<div>Hello World</div>
</div>
<input type="button" value="add" class="add" />
関連
-
[解決済み】ある要素を別の要素に移動させるには?
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] jQueryで要素が非表示になっているかどうかを確認するには?
-
[解決済み] 配列に特定のインデックスで項目を挿入する方法 (JavaScript)
-
[解決済み] jQueryで要素にスクロールする
-
[解決済み] jQueryで複数のクラスを持つ要素を選択するにはどうすればよいですか?
-
[解決済み] Microsoft JSONの日付はどのようにフォーマットするのですか?
-
[解決済み] 最初の要素にクラスを指定するCSSセレクタ
-
[解決済み】別のウェブページにリダイレクトするにはどうすればいいですか?
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Uncaught TypeError: 未定義のプロパティ 'length' を読み取れませんでした。
-
[解決済み] 選択オプション「selected」を値で設定する
-
[解決済み] jQueryのイベントハンドラを削除する最良の方法?
-
[解決済み] jQueryでオブジェクトに登録されたイベントハンドラを検索する
-
[解決済み] jQuery UI DatePicker - 日付フォーマットの変更
-
[解決済み] 既存の非順序型リストにリストアイテムを追加する方法
-
[解決済み] 動的に生成された要素でクリックイベントが動作しない [duplicate]
-
[解決済み] チェックボックスがチェックされた場合のjQuery
-
[解決済み] jQuery セレクタ。Id Ends With?
-
[解決済み] jQueryで多段式フォームをリセットする