addメソッド
addメソッドは、指定された
要素を既存の要素セットに追加します。
構文
セレクターによる追加:
.add(セレクター);
追加する要素は1つまたは複数の（配列の）DOM要素として指定します:
.add(DOM要素);
追加する要素はjQueryオブジェクトとして指定します:
.add(jQueryオブジェクト);
追加する要素はHTMLテキストとして指定します:
.add(HTMLテキスト);
追加する要素は、2番目のパラメータで指定されたコンテキスト内で、 指定されたセレクターを使用してページ上で検索されます。 検索コンテキストは、DOM要素、jQueryオブジェクト、 またはドキュメントオブジェクトとして指定できます:
.add(セレクター, コンテキスト);
例
すべての段落を見つけ、その末尾に
テキスト'!'を追加し、
次に見つかった段落にh2
見出しを追加し、同時に見出しと段落の
色を赤に設定しましょう:
<div>ddd</div>
<h1>hhh</h1>
<p>ppp</p>
<div id="test"><h2>hhh</h2></div>
<p>ppp</p>
<h2>hhh</h2>
<p>ppp</p>
$('p').append('!').add('h2').css('color', 'red');
例
検索コンテキストを導入しましょう -
#test要素内にあるh2のみを追加します:
let $context = $('#test');
$('p').append('!').add('h2', $context).css('color', 'red');
例
JavaScriptメソッドの
querySelector
を使用してDOM要素として検索コンテキストを作成します:
let context = document.querySelector('#test');
$('p').append('!').add('h2', context).css('color', 'red');
例
多くの場合、コンテキストなしで済ませられ、 より複雑なセレクターを作成するだけです:
$('p').append('!').add('#test h2').css('color', 'red');
