【jQuery】appendを使って要素を追加する方法を解説

この記事では、jQueryのappendを使って、
文字の追加やHTMLの追加、複数のHTMLを追加する方法を初心者でもわかりやすく解説していきます。

jQueryのappendとは

append()メソッドは、指定したコンテンツを指定した要素の最後に挿入します。

下の例は追加ボタンを押したら『案件探す!』と文字が追加れる例です。append()メソッドを使用して追加してます。

appendの構文

下記はappendの基本的な構文です

下記はappendを使って複数要素を追加する構文です

appendを使用して要素を追加する例

HTMLにテキストを追加する例

appendを使ってHTMLにテキストを追加する例を見ていきます。

HTML

jQuery

実行後のHTML

上記での例では、personのクラスを持つ要素全ての最後に『Test』を挿入しています。
指定した要素は、あてはまるもの全てに適用されるので注意しましょう!

HTML要素の追加

次はappendを使ってHTMLにHTMLを追加する例を見ていきます。

HTML

jQuery

実行後のHTML

上記での例では、personのクラスを持つ要素全ての最後にHTML『<p>Test</p>』を挿入しています。

HTML要素を複数追加

append()の引数にカンマ区切りで要素を記述すれば複数の要素を一度に追加できます。
例えば、personクラスに要素を2つ追加する例を見てみます。

HTML

jQuery

実行後のHTML

この例では、「append(‘<div id=”test1″>’, ‘<div id=”test2″>’)」と記述することで2つのdiv要素を追加しています。

Writer
Ryotin

Ryotin

現役フリーランスエンジニアです。使ってるエージェントはフライテック!得意言語はJava。月収は75万円。SESのフリーランスではこれ以上稼ぐのは厳しそう...とはいってもサラリーマンの時より倍の収入だから家族も喜んでるけどね!

最新の案件情報

フリーランスエンジニアの案件探し