js STUDIO

.appendTo()

要素を指定したエレメント内の一番後ろに追加します。

.appendTo( target ) 1.0追加

戻り値:jQuery

引数 説明
target セレクタ、HTML文字列, DOM要素, jQueryオブジェクトのいずれかを指定し、この要素の後ろに マッチしている要素を挿入します。

補足事項

.append()と.appendTo()は同じ働きをします。 大きな違いは「挿入される場所」と「挿入されるコンテンツ」の文法上の位置です。

element.append(target)
elementに「挿入される場所」、targetに「挿入するコンテンツ」
element.appendTo(target)
elementに「挿入するコンテンツ」、targetに「挿入される場所」

次のようなコードがあった場合、

<h2>ようこそ</h2>
<div class="container">
  <div class="inner">こんにちは</div>
  <div class="inner">さようなら</div>
</div>

マッチする各要素の後ろにP要素を追加します。

$('<p>テスト</p>').appendTo('.inner');

innerクラスを持つDIV要素は下記のように変更されます。

<h2>ようこそ</h2>
<div class="container">
  <div class="inner">
    こんにちは
    <p>テスト</p>
  </div>
  <div class="inner">
    さようなら
    <p>テスト</p>
  </div>
</div>

また、ページ内のDOM要素を選択、挿入することも可能です。

$('h2').appendTo($('.container'));

このコードが実行されると、クローンは作成されずマッチした要素の移動が行われます。

<div class="container">
  <div class="inner">こんにちは</div>
  <div class="inner">さようなら</div>
  <h2>ようそこ</h2>
</div>

ただし、マッチした要素が複数ある場合は2つ目以降の挿入される要素はクローンのコピーが作成されます。

デモ

全てのSPAN要素を、ID:fooのDIV要素の後ろに挿入します。 $("#foo").after("p")と同じ動作をします。 

<!DOCTYPE html>
<html>
<head>
<style>#foo { background:yellow; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span>SPAN要素</span>
<div id="foo">ID:fooのDIV要素　</div>
<script>$("span").appendTo("#foo");</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM