add Metodu
add metodu, belirtilen
elemanları mevcut eleman kümesine ekler.
Sözdizimi
Seçici ile ekleme:
.add(seçici);
Eklenecek elemanlar bir veya birden fazla (dizi olarak) DOM elemanı ile belirtilir:
.add(DOM elemanı);
Eklenecek elemanlar bir jQuery nesnesi ile belirtilir:
.add(jQuery nesnesi);
Eklenecek elemanlar html metni ile belirtilir:
.add(html metni);
Eklenecek elemanlar, ikinci parametre ile belirtilen alan içinde, belirtilen seçici kullanılarak sayfada aranır. Arama alanı bir DOM elemanı, jQuery nesnesi veya belge nesnesi ile belirtilebilir:
.add(seçici, bağlam);
Örnek
Tüm paragrafları bulalım, sonlarına
'!' metnini ekleyelim,
ardından bulunan paragraflara
h2
başlıklarını ekleyelim ve aynı anda hem başlıklar hem de paragraflar
için kırmızı rengi ayarlayalım:
<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');
Örnek
Arama bağlamını belirleyelim - sadece
#test elemanının içinde bulunan
h2 başlıklarını ekleyelim:
let $context = $('#test');
$('p').append('!').add('h2', $context).css('color', 'red');
Örnek
JavaScript metod olan
querySelector kullanarak
bir DOM elemanı şeklinde arama bağlamı oluşturalım:
let context = document.querySelector('#test');
$('p').append('!').add('h2', context).css('color', 'red');
Örnek
Çoğu zaman bağlam olmadan da yapılabilir, sadece daha karmaşık bir seçici yaparak:
$('p').append('!').add('#test h2').css('color', 'red');
