要素の追加/移動[append][appendTo][prepend][jQuery]

2017年8月8日

append/appendToメソッドを利用すると、生成した要素を目的の位置に追加していくことができます。

 

スポンサーリンク

 

 

正確には、append/appendToメソッドによって、生成した要素をある要素の子要素の最後に挿入することができます。

 

デモ画面では、ボタンをクリックすると<p>サンプル</p>が追加されていくのが、分かります。

 

デモ画面1

 

 

25行目
$()関数に生成したい要素を設定しています。つまりelementという名前の変数には、jQueryオブジェクトが挿入されます。今回は要素として、<p>サンプル</p>を設定しています。

 

関連ページ

基本セレクタについて[要素][id][クラス][jQuery]

 

26行目
appendメソッドの引数として指定できるのは、<li></li>などのようにタグで囲まれた要素(Elemtnt)のみです。

 

ボタンを1回クリックすると、<div id=”sample”>〜</div>の中の子要素の最後、つまり<p>元からあるサンプル</p>の次に要素が追加されていくのが分かります。要素については、関連ページをご参照下さい。

 

関連ページ

getElementByIdについて[DOM][ノード][Element]

 

 

appendToメソッドは、appendメソッドとjQueryオブジェクトと引数が逆になります。上記のデモ画面コードの26行目は下記のように置き換えられます。

 

↓appendToメソッドで置き換える

 

 

append/appendToメソッドは子要素の最後に追加されますが、prepend/prependToメソッドを利用すると、子要素の先頭に追加されます。

 

デモ画面2

 

 

 

要素を移動させる


 

append/appendToメソッドを利用して、すでに存在する要素を移動させることもできます。下記デモ画面では、サンプル1の要素の中に、サンプル2要素を移動させています。

 

デモ画面3

 

 

 

本記事では説明しませんが、append/appendToメソッドと同様に、要素を追加/移動するメソッドとして他にも下記のようなものがあります。

 

 before/insertBefore   兄弟要素の前に追加
 after/insertAfter  兄弟要素の後に追加 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー