こんにちは、ライターのマサトです！
今回は、jQueryで任意のHTML要素を追加することができる「after()」メソッドについて学習をしていきましょう！
この記事では、
・「after()」とは？
・要素を追加してみよう
・要素を削除してみよう
・「after()」の戻り値について
という基本的な内容から、
・「after()」の逆「before()」を使う
・「after()」でclickが効かない対処法
などの応用的な使い方に関しても解説していきます。
この記事で、jQueryの「after()」をしっかり学習して自分のスキルアップを目指しましょう！
「after()」とは？
それでは、まず最初に「after()」メソッドについての基本的な知識を学習していきましょう！
「after()」は、対象要素の次に新しいHTML要素を追加できるメソッドになります。
この「追加できる」とはどういう意味でしょうか？
例えば、以下のようなP要素が配置されたHTMLがあるとします。
<p>こんにちは</p>
このp要素の下に、もう1つ別のp要素を配置したいような場合に「after()」は役に立つのです。
つまり、もともと存在していないHTML要素をjQuery側で生成して配置することができるというわけですね。
これが「追加できる」という意味になります。
本記事では、「after()」の基本的な使い方からさまざまな活用法を勉強できるので、ぜひ参考にしてみてください！
要素を追加してみよう
ここからは、実際に「after()」を使ったプログラミングを勉強していきましょう！
「after()」の使い方は簡単で、【 対象要素.after( 要素 ) 】のように引数へ追加したいHTML要素を記述するだけです。
すると、対象要素の下に追加された要素が配置されます。
例えば「p要素」を新しく追加する場合は、「after(‘<p></p>’)」のように文字列でHTMLを記述するわけです。
次のサンプル例を見てください！
<body>
<p>こんにちは</p>
<script>
$('p').after('<p>新しく追加した要素</p>');
//すべての「ｐ要素」を出力
$('p').each(function(value, elem) {
console.log( elem );
})
</script>
</body>
実行結果
<p>こんにちは</p> <p>新しく追加した要素</p>
この例では、p要素が1つだけ配置されており「after()」でもう1つ別のp要素を追加していますね。
対象要素が「$(‘p’)」なので、最初からあったp要素の下に別のp要素が配置されるというわけです。
最後に、「each()」を使って現在のp要素をすべて出力しています。
実行結果を見ると分かりますが、新しく追加されたp要素も一緒に出力されているのが分かりますね。
要素を削除してみよう
次に、「after()」で追加した要素を削除する方法を見ていきましょう！
「after()」は新しくHTML要素を追加するメソッドなので削除するメソッドは用意されていません。
そこでjQueryに標準で用意されている「remove()」メソッドを使うのが最も簡単な方法になります。
注意するポイントは、追加した要素が特定できるように属性を付与しておくという点です！
例えば、次のサンプルは「id属性」を付与している例です。
$('p').after('<p id="text">新しく追加した要素</p>');
このように追加した要素の属性がはっきりしていると「remove()」を使う時に役に立ちます。
次のサンプル例を見てください！
<body>
<p>こんにちは</p>
<script>
$('p').after('<p id="text">新しく追加した要素</p>');
$('#text').remove();
//すべての「ｐ要素」を出力
$('p').each(function(value, elem) {
console.log( elem );
})
</script>
</body>
実行結果
<p>こんにちは</p>
この例では、p要素の下に別の新しいp要素を追加していますね。
ただし、追加した要素の「属性」を利用してすぐに「remove()」で削除しています。
そのため、実行結果には最初から配置されていたp要素だけが出力されているというわけですね。
「after()」の戻り値について
「after()」の引数ですが、実は関数（function）を設定することも可能です。
記述方法は次のとおりです！
after( function( index, content ) { 何らかの処理 })
このように、after()の引数へ関数を挿入することで「index」「content」の2つの値を取得することができるようになります。
これは対象となる要素の「インデックス番号（index）」と、「コンテンツ（content）」になります。
次のサンプル例を見てください！
<body>
<p>おはよう</p>
<p>こんにちは</p>
<script>
$('p').after(function( index, content ) {
console.log( index + '：' + content );
});
</script>
</body>
実行結果
0：おはよう 1：こんにちは
この例では2つのp要素が配置されており、after()に関数を使って「index / content」の値を出力していますね。
「index」はp要素のインデックス番号が格納されており、「content」は要素の中身である文字列が格納されています。
そして、これらの値を活用したうえで「return」によって、新しいHTML要素を戻り値として返すことができるのが特徴です。
例えば、次のサンプル例を見てください！
<body>
<p>おはよう</p>
<p>こんにちは</p>
<script>
$('p').after(function( index, content ) {
return '<p>' + content + '</p>';
})
//すべての「p要素」を出力
$('p').each(function( value, element ) {
console.log(element);
})
</script>
</body>
実行結果
<p>おはよう</p> <p>おはよう</p> <p>こんにちは</p> <p>こんにちは</p>
この例では、after()に関数を使って「content」の値を活用して戻り値にしていますね。
「return ‘<p>’ + content + ‘</p>’」と記述することで、取得したcontentの値をp要素に加工しているわけです。
その結果、最初から配置されていたp要素をコピーできているのが実行結果からも分かりますね。
このように、関数を活用すると面白い処理が作れるので、ぜひ覚えておきましょう！
「after()」の逆「before()」を使う
これまで「after()」メソッドについて勉強してきましたが、一緒によく使われるメソッドとして「before()」があります。
「after()」で生成した要素を対象要素の次に配置するのに対して、「before()」は対象要素の前に配置できるのが特徴です。
記述方法はafter()と同じく、【 対象要素.before( 要素 ) 】のように記述し引数の要素に生成したHTML要素を書くだけです。
次のサンプル例を見てください！
<body>
<p>おはよう</p>
<script>
$('p').before('<p>新しい要素</p>');
//すべての「p要素」を出力
$('p').each(function( value, element ) {
console.log(element);
})
</script>
</body>
実行結果
<p>新しい要素</p> <p>おはよう</p>
この例では、1つだけ配置されているp要素を対象として、before()を実行して新しい要素を追加していますね。
実行結果を見ると、最初からあったp要素の前に新しく生成した要素が追加されているのが分かりますね。
もちろん「before()」も関数を利用することができます。
「after()」と「before()」は、その対象とする要素の「次」に配置したいのか、「前」に配置したいのかで使い分けるようにしましょう。
「after()」でclickが効かない対処法
最後に、「after()」で生成した要素にイベント処理を追加する際の注意ポイントについてご紹介しておきます！
最も理解しておくべきポイントは、after()で要素を追加する「タイミング」です！
当然ながら、after()で生成する要素というのは最初から存在しているわけではありませんよね？
そのため、イベント処理のプログラムを最初に定義していると実行されないという不具合が発生します。
次のサンプル例を見てください！
<body>
<div id="main">
<p class="one">おはよう</p>
</div>
<script>
$('.one').click(function() {
$(this).after('<p class="two">新しく追加された要素</p>');
})
//新しく追加された要素にイベント処理を追加
$('.two').click(function() {
console.log('追加された要素');
})
</script>
</body>
この例では、divタグに囲まれたp要素が配置されています。
そして、このp要素をクリックした時に「after()」で新しい要素を追加するという処理を行っています。
ここまでは問題ないのですが、そのあとに「新しく追加された要素」にclickイベントの処理を記述していますよね？
しかし、このJavaScriptプログラムを実行した時点では、まだafter()によって要素は追加されていません。
つまり存在していないのです。
それなのにイベント処理を記述しても実行されるはずがありません。
そのため、after()によって生成された要素にclickイベントを定義するには次のように修正します！
<body>
<div id="main">
<p class="one">おはよう</p>
</div>
<script>
$('.one').click(function() {
$(this).after('<p class="two">新しく追加された要素</p>');
})
//イベント処理を改良
$('#main').on('click', '.two', function() {
console.log('追加された要素です')
})
</script>
</body>
注目すべきは修正されたイベント処理です！
「click()」ではなく「on()」を使うことで、新しく追加された要素のclass属性名を指定していますね。
そして、対象となる要素を「$(‘#main’)」のように記述して、親要素であるdivタグにしています。
これにより、最初から存在しているdiv要素を対象にすることでイベント処理を定義しているのです。
あとは、「on()」によって新しく生成された要素を指定することで、上手くイベントが動作するというわけです。
ちょっとしたテクニックですが、知らないとバグを生みやすいのでぜひ忘れないようにしておきましょう！
まとめ
今回は、jQueryで新しく要素を追加できる「after()」メソッドの学習をしました！
最後に、もう一度ポイントを振り返ってみましょう！
・after()は対象となる要素の次に新しく要素を追加できる
・新しく追加した要素の削除は「remove()」を使おう
・after()の引数には関数を挿入することもできる
・対象となる要素の前に要素を追加したい場合は「before()」を使う
・追加した要素にclickイベントを定義する時はタイミングに注意しよう
上記内容を踏まえて、ぜひ自分のプログラムにも積極的に取り入れながら学習を進めるようにしましょう！
