HTMLでコーディングを進めていくうえで、ソースコードはシンプルにしたいけど、Webブラウザで表示時にはなるべく装飾をしたい…なんてことが起きうる場合、あるかと思います。
本来であれば、コーディング時にソースコードに要素を追加していくことでCSSを設定できるようにする…が一般的だとは思いますが、なるべくソースコードはシンプルにしたい！となった場合には、Webブラウザでページ表示時に要素を追加できるようjQueryを設定することでソースコードはシンプルにしておいたままにすることが可能です！
そこで今回は、見本コード
<div class="test"> テキストテキストテキストテキストテキスト </div>
を元にjQueryで特定の要素に対して別要素を追加するいくつかの方法についてご紹介したいと思います！
目次
特定の要素の直前に別要素を追加する方法
まず初めに、特定の要素の直前に別要素を追加する方法についてご紹介します。
例えば、先述の見本コード内の
<div class=”test”>～</div>
の直前に
<div class=”test-before”></div>
を追加したい場合には、jQueryで
<script>
$(function() {
$('.test').before('<div class="test-before"></div>');
});
</script>
と設定することで、Webブラウザで表示時には
<div class="test-before"></div> <div class="test"> テキストテキストテキストテキストテキスト </div>
といった風に要素が追加された状態で表示されます！
特定の要素の直後に別要素を追加する方法
続いて、特定の要素の直後に別要素を追加する方法についてご紹介します。
先述の見本コード内の
<div class=”test”>～</div>
の直後に
<div class=”test-after”></div>
を追加したい場合には、jQueryで
<script>
$(function() {
$('.test').after('<div class="test-after"></div>');
});
</script>
と設定することで、Webブラウザで表示時には
<div class="test"> テキストテキストテキストテキストテキスト </div> <div class="test-after"></div>
といった風に要素が追加された状態で表示されます。
特定の要素を別要素で挟み込む方法
続いて、特定の要素を別要素で挟み込む方法についてご紹介します。
例えば、先述の見本コード内の<div class=”test”>～</div>を
<div class=”test-base”>～</div>
で挟み込みたい場合は、jQueryで
<script>
$(function() {
$('.test').wrap('<div class="test-base"></div>');
});
</script>
と設定することで、Webブラウザで表示時には
<div class="test-base"> <div class="test"> テキストテキストテキストテキストテキスト </div> </div>
といった風に要素を挟み込む形で表示されます！
特定の要素内に別要素を挟み込む形で追加する方法
続いて、特定の要素内に別要素を挟み込む形で追加する方法についてご紹介します。
例えば、先述の見本コード内の「テキストテキストテキストテキストテキスト」を
<div class=”text”>～</div>
で挟み込みたい！となった場合には、jQueryで
<script>
$(function() {
$('.test').wrapInner('<div class="text"></div>');
});
</script>
と設定することで、Webブラウザで表示時には
<div class="test"> <div class="text">テキストテキストテキストテキストテキスト</div> </div>
といった風に要素が追加された状態で表示されます！
特定の要素内の最初に別要素を追加する方法
続いて特定の要素内の最初に別要素を追加する方法についてご紹介します。
先述の見本コード内の「テキストテキストテキストテキストテキスト」の直前に
<div class=”test-in-before”></div>
を追加したい、となった場合には、jQueryで
<script>
$(function() {
$('.test').prepend('<div class="test-in-before"></div>');
});
</script>
と設定することで、Webブラウザで表示時には
<div class="test"> <div class="test-in-before"></div> テキストテキストテキストテキストテキスト </div>
といった風に要素が追加された状態で表示されます！
特定の要素内の最後に別要素を追加する方法
続いて特定の要素内の最後に別要素を追加する方法についてご紹介します。
先述の見本コード内の「テキストテキストテキストテキストテキスト」の直後に
<div class=”test-in-after”></div>
を追加したい、となった場合には、jQueryで
<script>
$(function() {
$('.test').append('<div class="test-in-after"></div>');
});
</script>
と設定することで、Webブラウザで表示時には
<div class="test"> テキストテキストテキストテキストテキスト <div class="test-in-after"></div> </div>
といった風に要素が追加された状態で表示されます！
まとめ
以上が要素に対して別要素を追加する代表的な方法でした！
jQueryが使える環境であれば結構使える技術だと思いますので、よろしければお使いください(^-^)
