要素を別の要素の後に追加するにはどうすればよいですか？

174

特定のテキストボックスがあり、その後にdivを追加したいと思います。私は.append()関数を試しましたが、それは要素にdivを追加するだけです。

たとえば、私は：

<input type="text" id="bla" />

それを次のように変更したいと思います。

<input type="text" id="bla" /><div id="space"></div>

— スケリット
ソース

287

after()メソッドを使用してみてください：

$('#bla').after('<div id="space"></div>');

ドキュメンテーション

— ローワン
ソース

8

.after（）メソッドと.insertAfter（）メソッドは同じタスクを実行します。

— リファット

7

それは正しいですが、それはあなたがそれをコーディングしたい方法に依存します。通常、「＃bla」入力がすでに選択されており、後で追加のコンテンツを追加します。純粋に私の好みですが、どちらの方法にも速度上の利点があるかどうかはわかりません。

— ローワン

37

試す

.insertAfter()

ここに

$(content).insertAfter('#bla');

— リファット
ソース

17

あなたのコード$('<div id="space"></div>').insertAfter('#bla')はむしろより似ているべきではありません$('#bla').insertAfter(content);か？

— ローワン

6

まず、input要素に終了タグがあってはなりません（http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT：終了タグ：forbiddenから）。

次に、機能after()ではなくが必要append()です。

— ナイビスト
ソース

正解ですが、これは.append（）関数を試したときに起こります。

— スケリット

2

XHTMLの場合、入力要素を閉じる必要があります（ただし、終了タグは使用しないでください）。

— CiscoIPPhone 2010

2

HTML4 <input>では閉じないでください。

— Derek款會功夫

1

解決済みjQuery：別の要素の後に要素を追加

<script>
$( "p" ).append( "<strong>Hello</strong>" );
</script>

または

<script type="text/javascript"> 
jQuery(document).ready(function(){
jQuery ( ".sidebar_cart" ) .append( "<a href='http://#'>Continue Shopping</a>" );
});
</script>

— アシャール・ザファール
ソース

2

これは誤りです。これは、OPが述べたように、親要素内に要素を追加します。もう一度質問を読んで、回答を修正することを検討してください。

— エヴァンヴィーランド