Metoda AppendTo w jQuery: wstaw elementy

Biblioteka jQuery zawiera wiele funkcji, które umożliwiają manipulowanie węzłami DOM w dokumencie: usuwanie, klonowanie, osadzanie, przenoszenie. Funkcja appendTo () jQuery jest wywoływana dla elementu (lub zestawu elementów). Akceptuje miejsce docelowe jako parametr wejściowy - węzeł, w którym ruch zostanie wygenerowany. Podstawowa składnia metody appendTo jQuery:

Kontekst wywołania

Metoda jest wywoływana dla zestawu jQuery, który może zawierać jeden lub więcej węzłów DOM. Zestaw może zostać utworzony jako standardowy selektor za pomocą selektora:

$ ("rozpiętość") appendTo (cel);
$ ("p.red") appendTo (cel);

Również kontekst można stworzyć w locie:

$ ('
Hello, world
') .appendTo (cel);
$ (' Some text ') .appendTo (cel);

W tym przypadku elementy są tworzone ręcznie, ale nie są wybierane spośród istniejących w dokumencie. Węzły w zestawie zostaną przeniesione na koniec elementu docelowego. Jeśli są one obecnie na stronie, funkcja jQuery appendTo () usuwa je z bieżącej lokalizacji i przenosi je do nowej.

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

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

Jeśli zestaw zawiera kilka węzłów, będą one traktowane jako pojedynczy element.

$ ("span.test") appendTo (cel);

Jeśli istnieją trzy węzły zakresu w dokumencie z klasą testową, trzyelementowa rozpiętość zostanie wstawiona na końcu celu.

parametr docelowy

Jedynym parametrem wejściowym dla metody appendTo () jQuery jest miejsce docelowe wstawiania elementów. Można go określić jakojQuery-set lub jako zwykły selektor:

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

Przenoszenie węzłów będzie zlokalizowane na samym końcu elementu docelowego, po wszystkich jego węzłach dodatkowych.

Jeśli obiekt docelowy jest zbiorem jQuery składającym się z więcej niż jednego elementu, zostanie przeprowadzona manipulacja z każdym z nich. W takim przypadku zawartość ruchoma jest kopiowana, aby można ją było duplikować w kilku miejscach.

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

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

Obliczona wartość

Funkcja jQuery appendTo () zwraca zestaw jQuery składający się z ruchomych elementów. Ta wartość jest identyczna z parametrem treści w powyższym sygnaturze metody.

Zastosowanie jQuery appendTo ()

Przykład użycia metody wstawiania wygenerowanej strony.

Wstępne oznaczenia:


Pierwsze dziecko

drugie dziecko

​​

Wstawianie trzeciego węzła:

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

Zaktualizowana adnotacja:


Pierwsze dziecko

drugie dziecko

Trzecie dziecko

Przykład wstawienia wielokrotnego.

Wstępne oznaczenia:



Dziecko 1



Dziecko 2



Treść 1

Treść 2


Przenoszenie elementów .content na koniec węzłów .target:


& lt; script type = "text /javascript" & gt;
może blokować Ustawienia2 = {ID bloku: "R-A-70350-2", renderTo: "yandex_rtb_R-A-70350-2", async:! 0};
if (document.cookie.indexOf ("abmatch =") & gt; = 0) blockSettings2.statId = 70350;
! Zastosowanie (a, b, c, d, e) {A [c] = A [c] || [] A [c] .Push (funkcja () {Ya.Context.AdvManager.render (blockSettings2)} ), e = b.getElementsByTagName ("scenariusz")d = b.createElement ("scenariusz") d.type = "text /JavaScript" d.src = „//an.yandex.ru/System /context.js "d.async = 0e.parentNode.insertBefore (d, e)} (to this.document," yandexContextAsyncCallbacks „);
$ ("Content") appendTo ("Target");

Zaktualizowane oznaczenie:

 


Dziecko 1

Treść 1

Treść 2



Dziecko 2

Treść 1

Treść 2







Wstawienie wystąpiło w obu elementach z klasą docelową, a przestrzeń źródłowa elementów z klasą treści pozostała pusta.
Podczas pracy z appendTo () metody jQuery ważne jest zrozumienie mechaniki wstawiania węzłów i cech manipulacji zestawami elementów.

Powiązane publikacje

Przykład jQuery. Proste przykłady skryptów jQuery Przykład jQuery. Proste przykłady skryptów jQuery suwaki jQuery. Tworzenie suwaka jQuery suwaki jQuery. Tworzenie suwaka jQuery Używanie MySQL: wstaw do Używanie MySQL: wstaw do