.add()

http://api.jquery.com/add/

マッチした要素の集合に、指定した要素を追加します。

.add( selector ) 1.0追加
.add( elements ) 1.0追加
.add( html ) 1.0追加
.add( jQuery object ) 1.3.2追加
.add( selector, context ) 1.4追加
補足事項
デモ

.add( selector ) 1.0追加

戻り値:jQuery

引数	説明
selector	追加する要素をセレクタで指定します。

.add( elements ) 1.0追加

戻り値:jQuery

引数	説明
elements	追加する要素をDOM要素で指定します。

.add( html ) 1.0追加

戻り値:jQuery

引数	説明
html	追加する要素をHTML文字列で指定します。

.add( jQuery object ) 1.3.2追加

戻り値:jQuery

引数	説明
jQuery object	追加する要素をjQueryオブジェクトで指定します。

.add( selector, context ) 1.4追加

戻り値:jQuery

引数	説明
selector	追加する要素をセレクタで指定します。
context	セレクタが検索するDocument内の範囲を絞り込む指定をします。

補足事項

.add()は次のようにマッチ要素を更新してそのまま処理を行うか、変数代入時に使用するようにしてください。

$("p").add("div").addClass("widget");
var pdiv = $("p").add("div");

下記の場合、変数pdivは更新されません。.add()はpdivとは別の新しいオブジェクトを生成し、処理が完了したら破棄してしまうためです。

var pdiv = $("p");
pdiv.add("div");  //変数pdivは変更されません。

下記のようにHTML文字列を指定した場合、P要素はその場で生成され背景色の変更も行われるもののページ上には反映されません。もしページ上に出力させたい場合は、挿入系のメソッドをチェインで繋げてください。

$('li').add('<p id="new">新しい要素</p>')
  .css('background-color', 'red');

jQuery1.4からは.add()の戻り値はDocumentに沿った並び順を保持して返すようになりました。(シンプルな連結であれば…(翻訳に自信無し))

.add()の反対のメソッドとして、.not( elements | selector )を使用すれば対象の要素をマッチした要素から除外し、 .end()を使用すれば、マッチしている要素の状態を.add()を使用する前に戻します。

デモ

DIV要素をボーダーで囲った後、P要素をマッチ要素に加えて背景を黄色にする処理を行なっています。

<!DOCTYPE html>
<html>
<head>
<style>
 div { width:60px; height:60px; margin:10px; float:left; }
 p { clear:left; font-weight:bold; font-size:16px;
     color:blue; margin:0 10px; padding:2px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<p>addに指定された要素(ボーダーで囲まれていない事に注目)</p>
<script>
$("div").css("border", "2px solid red")
        .add("p")
        .css("background", "yellow");
</script>
</body>
</html>

P要素にSPAN要素をaddで加え、その後背景を黄色に変更しています。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>P要素です</p><span>SPAN要素です</span>
<script>$("p").add("span").css("background", "yellow");</script>
</body>
</html>

P要素を複製し、更にaddによってHTML文字列の生成、追加を行ったものをページ内に挿入しています。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>こんにちは</p>
<script>$("p").clone().add("<span>もう一つ追加</span>").appendTo(document.body);</script>
</body>
</html>

addにDOM要素を指定して、背景色を黄色に変更しています。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>こんにちは</p><span id="a">再び、こんにちは</span>
<script>$("p").add(document.getElementById("a")).css("background", "yellow");</script>
</body>
</html>