jQueryで要素を追加する方法【サンプル有】

2019年6月26日2020年3月2日

jQueryで、要素の前または後にコードを挿入したい時の処理をまとめました。

要素の外の先頭に挿入する「.before」

beforeメソッドは、指定した要素の外の先頭に追加することが出来ます。

<!-- beforeメソッドにより、この位置に追加されます。 -->
<div class="ex_01" style="border:2px solid #CCC; padding: 10px;">
    <p>.ex_01要素の中身です。</p>
</div>

<script>
$(function(){
    $('.ex_01').before('<p>追加されたpタグです。</p>');
});
</script>

要素の外の末尾に挿入する「.after」

afterメソッドは、指定した要素の外の末尾に追加することが出来ます。

<div class="ex_02" style="border:2px solid #CCC; padding: 10px;">
    <p>.ex_02要素の中身です。</p>
</div>
<!-- afterメソッドにより、この位置に追加されます。 -->

<script>
$(function(){
    $('.ex_02').after('<p>追加されたpタグです。</p>');
});
</script>

要素の中の先頭に挿入する「.prepend」

prependメソッドは、指定した要素の中の先頭に追加することが出来ます。

<div class="ex_03" style="border:2px solid #CCC; padding: 10px;">
    <!-- prependメソッドにより、この位置に追加されます。 -->
    <p>.ex_03要素の中身です。</p>
</div>

<script>
$(function(){
    $('.ex_03').prepend('<p>追加されたpタグです。</p>');
});
</script>

要素の中の末尾に挿入する「.append」

appendメソッドは、指定した要素の中の末尾に追加することが出来ます。

<div class="ex_04" style="border:2px solid #CCC; padding: 10px;">
    <p>.ex_04要素の中身です。</p>
    <!-- appendメソッドにより、この位置に追加されます。 -->
</div>

<script>
$(function(){
    $('.ex_04').append('<p>追加されたpタグです。</p>');
});
</script>

---

要素の外に挿入したいか、中に挿入したいかで、記述が変わり覚えにくいですが、用途に応じて使い分けていきましょう。

以上、jQueryで要素を追加する方法、でした。