【append, prepend】jQueryで要素の追加と移動をしたい

今回は要素を追加したり移動をしたいときの方法を紹介していきたいと思います。

jQueryを使えば要素の追加や移動も簡単に実現できます。

それではさっそく見ていきましょう。

要素を追加する

子要素の末尾に追加する方法は下記になります。

jQuery("div").append("<p>テキスト</b>");

divの子要素の末尾にテキストを追加します。

jQuery("<p>テキスト</b>").appendTo("div");

テキストをdivの末尾に追加します。

appendとappendToの指定はオブジェクトと引数が逆になります。

子要素の先頭に追加する方法は下記になります。

jQuery("div").prepend("<p>テキスト</b>");

divの子要素の先頭にテキストを追加します。

jQuery("<p>テキスト</b>").prependTo("div");

テキストをdivの末尾に追加します。

次は要素の前に追加する方法です。

jQuery("div").before("<p>テキスト</b>");

divの前にテキストを追加します。

jQuery("div").after"<p>テキスト</b>");

divの後にテキストを追加します。