jQueryでDOM要素を末尾に追加する:append(), appendTo()

今回は jQuery で HTML タグやテキストなどの要素を追加する方法について説明します。

jQuery で要素を末尾に追加する場合は、append() や appendTo() を使います。

要素を追加する:append()

append() メソッドは引数に指定した要素を末尾に追加します。append() メソッドの記述方法を以下の通りです。

引数には HTML の要素や オブジェクトを指定することができます。

サンプル

HTML

jQuery

上の例では、ボタンを押すたびに ul 要素内の末尾に <li>追加要素</li> が追加されていきます。以下はボタンを1回押した後の 結果です。

複数の要素を同時に追加する

また、append() には追加する要素を複数個、指定することができます。

要素を追加する:appendTo()

appendTo() メソッドは append() メソッドと同様に指定した要素を末尾に追加します。

appendTo() メソッドの記述方法は以下の通りです。

append() メソッドとはセレクタと引数に渡す要素が反対であることに注意してください。

サンプル

HTML

jQuery

上の例では、ボタンを押すたびに ul 要素内の末尾に <li>追加要素</li> が追加されていきます。以下はボタンを1回押した後の 結果です。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集