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

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

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

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

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

要素を追加する

子要素の末尾に追加する

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

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

divの子要素の末尾に<p>テキスト</b>を追加します。

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

<p>テキスト</b>をdivの末尾に追加します。

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

子要素の先頭に追加する

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

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

divの子要素の先頭に<p>テキスト</b>を追加します。

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

<p>テキスト</b>をdivの末尾に追加します。

要素の前に追加する

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

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

divの前に<p>テキスト</b>を追加します。

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

divの後に<p>テキスト</b>を追加します。

サンプル

コメント

タイトルとURLをコピーしました