jQuery DOM操作-ターゲット末尾にコンテンツを挿入-

jQueryでDOM操作においてあるDOM要素に別のDOM要素を挿入したい場合には以下のメソッドが使える

• append()-ターゲット末尾にコンテンツを挿入
• prepend()-ターゲット先頭にコンテンツを挿入
• after()-ターゲットの後にコンテンツを挿入
• before()-ターゲットの前にコンテンツを挿入
• replaceWith()-ターゲットのコンテンツを置き換え

ここでまず言葉の説明
ターゲット：操作の対象となる要素
コンテンツ：ターゲット末尾・先頭または前後に挿入される要素

上記5つのメソッドは以下のようにも書き換えられる

• appendTo()-ターゲット末尾にコンテンツを挿入
• prependTo()-ターゲット先頭にコンテンツを挿入
• afterTo()-ターゲットの後にコンテンツを挿入
• beforeTo()-ターゲットの前にコンテンツを挿入
• replaceAll()-ターゲットのコンテンツを置き換え

今回はappend()およびappendTo()について説明する。とはいえ、他のメソッドについても考え方は同じで、動作が異なるだけだ。

append/appendTo

appendとappendToは目的に違いはないが、書き方が異なるし、動作も異なる時がある。意図する動作に合わせて使い分けなければならない。

書き方

append

$(target).append(content)
例えば以下のHTML文章では、

<div id="content">アリッサ・ホワイト・グラズ</div>
<div>アーチ・エネミーのボーカル</div> 
<div id="target"></div>

では

$('#target').append($('#content'))

と書く。

ちなみにこのスクリプトが実行されると、ブラウザでは

アーチ・エネミーのボーカル
アリッサ・ホワイト・グラズ

表示される。

HTML文章はスクリプトなしでは先頭に「アリッサ・ホワイト・グラズ」とブラウザに表示していたのが、スクリプトを実行すると、「アリッサ・ホワイト・グラズ」が文章末尾に移動される。移動ではなく、コピーするなら

$('#target').append($('#content').html())

と書く。

appendTo

$(content).appendTo(target)

appendとは逆にメソッドの引数にはtargetを指定する。ちなみに引数にはappendとは違い、関数を指定できない。またこのメソッドでは

$('#target').append($('#content').html())

と同じ動作を再現できない。あくまで僕が試した範囲内での話であり、再現できる方法を見つけてくれた人や知っている人はコメントで教えてほしい。