jQuery でHTMLの操作2

jQueryでHTMLの操作について記載いたします。 今回は元々記述されている要素の内容を残したままHTMLを追加する方法について調べました。 まずは以下のように記述があるとします。

HTML

    <p id="first">テキスト</p>

1.HTML要素内の先頭に挿入

指定した要素内部の先頭にHTMLを挿入するのに prepend()を使います。 prepend()の括弧内にHTMLを記述します

jQuery

$("p#first").prepend("<strong>先頭に挿入</strong>");

2.HTML要素の最後に挿入

指定した要素内部の最後にHTMLを挿入するには、 append()を使います。 prepend()と同じく括弧内にHTMLを記述します。

jQuery

$("p#first").append("<strong>最後に挿入</strong>");

3.HTML要素の前に挿入

指定した要素の前にHTMLを挿入するには、before()を使います。

jQuery

$("p#first").before("<strong>前に挿入</strong>");

4.HTML要素の後ろに挿入

指定した要素の後ろにHTMLを挿入するには、after()を使います。

jQuery

$("p#first").after("<strong>後ろに挿入</strong>");

といった形で今後も引き続きjQueryで試したことをまとめてブログに記載したいと思います。