Metoda AppendTo u jQuery: umetanje elemenata

Knjižnica jQuery sadrži mnoge značajke koje vam omogućuju manipuliranje DOM čvorovima u dokumentu: brisanje, kloniranje, ugradnja, premještanje. Funkcija jQuery appendTo () se poziva za element (ili skup elemenata). Prihvaća odredište kao ulazni parametar - čvor u kojem će se kretanje generirati. Osnovna sintaksa metode jQuery appendTo:

Kontekst poziva

Metoda se poziva za skup jQuery, koji može sadržavati jedan ili više DOM čvorova. Set može biti formiran kao standardni selektor pomoću selektora:

$ ('span') appendTo (target);
$ ('p.red') appendTo (cilj);

I kontekst se može stvoriti u letu:

$ ('
Zdravo, svijet
') .appendTo (target);
$ (' Neki tekst ') .appendTo (cilj);

U ovom slučaju, elementi se stvaraju ručno, ali ne i među postojećim u dokumentu. Čvorovi u skupu bit će premješteni na kraj ciljnog elementa. Ako se trenutno nalaze na stranici, jQuery appendTo () funkcija ih briše iz trenutne lokacije i premješta ih u novu.

& lt; skripta async = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
& lt ;! - fb_336x280_1 - & gt;

& lt; script & gt; (adsbygoogle = window.adsbygoogle || []). push ({});

Ako skup sadrži nekoliko čvorova, oni će se smatrati jednim dijelom.

$ ('span.test') appendTo (target);

Ako u dokumentu postoje tri rasponska čvora s ispitnom klasom, na kraju cilja umetnut će se raspon od tri elementa.

cilj parametra

Jedini ulazni parametar za jQuery metodu appendTo () je odredište za umetanje elemenata. Može se odrediti kaojQuery-set ili kao obični selektor:

$ ('h2') appendTo ($ ('.continent'));
$ ('p') appendTo ('div');

Pokretni čvorovi bit će smješteni na samom kraju ciljnog elementa, nakon svih njegovih pomoćnih čvorova.

Ako je cilj jQuery skup koji se sastoji od više od jednog elementa, manipulacija će se izvršiti sa svakim od njih. U ovom slučaju, pokretni sadržaj se kopira tako da se može kopirati na nekoliko mjesta.

& lt; skripta async = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
& lt ;! - fb_336x280_2 - & gt;

& lt; script & gt; (adsbygoogle = window.adsbygoogle || []). push ({});

Izračunata vrijednost

Funkcija jQuery appendTo () vraća skup jQuery koji se sastoji od pomičnih elemenata. Ova vrijednost je identična parametru sadržaja u gornjem potpisu metode.

Primjena jQuery appendTo ()

Primjer korištenja metode za umetanje generiranog mjesta.

Početna oznaka:


Prvo dijete

Drugo dijete

​​

Umetanje trećeg čvora:

var child = $ ('
ThirdChild
');
child.appendTo ($ ('. Parent'));

Ažurirano obilježavanje:


Prvo dijete

Drugo dijete

Treće dijete

Primjer višestrukog umetka.

Početna oznaka:



Dijete 1



Dijete 2



Sadržaj 1

Sadržaj 2


Premještanje elemenata sadržaja na kraj ciljnih čvorova:


& lt; script type = "text /javascript" & gt;
može blockSettings2 = {blockId: "R-A-70350-2", renderTo: "yandex_rtb_R-A-70350-2", async:! 0};
if (document.cookie.indexOf ("abmatch =") & gt; = 0) blockSettings2.statId = 70350;
Funkcija (a, b, c, d, e) {a [c] = a [c] || [], a [c] .push (funkcija () {Ya.Context.AdvManager.render (blockSettings2)} ), e = b.getElementsByTagName ("script") , d = b.createElement ("script"), d.type = "text /javascript", d.src = "//an.yandex.ru/system /context.js ", d.async =! 0e.parentNode.insertBefore (d, e)} (ovo, ovaj.dokument," yandexContextAsyncCallbacks ");
$ ('. Sadržaj') appendTo ('. Cilj');

Ažurirano obilježavanje:

 


Dijete 1
Sadržaj 1

Sadržaj 2



Dijete 2

Sadržaj 1

Sadržaj 2





Umetanje se dogodilo u oba elementa s ciljnom klasom, a izvorni prostor elemenata s razredom sadržaja ostao je prazan.
Kada se radi s jQuery metodom appendTo (), važno je razumjeti mehaniku umetanja čvorova i značajke manipulacija skupovima elemenata.

Povezane publikacije

Primjer jQuery. Jednostavni primjeri jQuery skripti jQuery klizači. Izrada klizača jQuery Zaglavlja u programu Excel: Umetanje, promjena, brisanje Kako napraviti mnogo pristalica u "Instagramu": pregled metoda, učinkovitih metoda i povratnih informacija Kako napraviti mnogo pristalica u "Instagramu": pregled metoda, učinkovitih metoda i povratnih informacija jQuery: Povežite se s web-stranicom