Methode add
Die Methode add fügt die angegebenen
Elemente zu einem bereits vorhandenen Satz von Elementen hinzu.
Syntax
Hinzufügen per Selektor:
.add(Selektor);
Die hinzuzufügenden Elemente werden durch ein oder mehrere (Array) DOM-Elemente angegeben:
.add(DOM-Element);
Die hinzuzufügenden Elemente werden durch ein jQuery-Objekt angegeben:
.add(jQuery-Objekt);
Die hinzuzufügenden Elemente werden durch HTML-Text angegeben:
.add(HTML-Text);
Die hinzuzufügenden Elemente werden auf der Seite mit Hilfe des angegebenen Selektors gesucht, innerhalb des Bereichs, der durch den zweiten Parameter festgelegt ist. Der Suchbereich kann durch ein DOM-Element, ein jQuery-Objekt oder ein Dokumentobjekt angegeben werden:
.add(Selektor, Kontext);
Beispiel
Lassen Sie uns alle Absätze finden, am Ende einen
Text '!' anhängen, dann zu den gefundenen Absätzen
die Überschriften h2
hinzufügen und gleichzeitig für Überschriften und Absätze
die Farbe Rot setzen:
<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');
Beispiel
Lassen Sie uns einen Suchkontext einführen - fügen wir
nur die h2 hinzu, die innerhalb des Elements
#test liegen:
let $context = $('#test');
$('p').append('!').add('h2', $context).css('color', 'red');
Beispiel
Erstellen wir einen Suchkontext in Form eines DOM-Elements mit
Hilfe der JavaScript-Methode
querySelector:
let context = document.querySelector('#test');
$('p').append('!').add('h2', context).css('color', 'red');
Beispiel
Meistens kommt man ohne Kontext aus, indem man einfach einen komplexeren Selektor erstellt:
$('p').append('!').add('#test h2').css('color', 'red');
