Метод AppendTo в jQuery: вмъкване на елементи

JQuery библиотеката съдържа много функции, които ви позволяват да манипулирате DOM възли в документ: изтриване, клониране, вграждане, преместване. Функцията jQuery appendTo () се нарича за елемент (или набор от елементи). Той приема дестинацията като входен параметър - възел, където ще се генерира движението. Основният синтаксис на метода jQuery appendTo:

Контекст на повикването

Методът се нарича jQuery набор, който може да съдържа един или повече DOM възли. Наборът може да се формира като стандартен селектор от селектора:

$ ('span') appendTo (target);
$ ('p.red') appendTo (цел);

Също така контекста може да бъде създаден в движение:

$ ('
Здравейте, world
') .appendTo (target);
$ (' Някои текстове ') .appendTo (цел);

В този случай елементите се създават ръчно, но не се избират сред съществуващите в документа. Възелите в комплекта ще бъдат преместени в края на целевия елемент. Ако в момента те са на страницата, функцията jQuery appendTo () ги изчиства от текущото местоположение и ги премества в новата.

& lt; скрипт async = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
& lt ;! - fb_336x280_1 - & gt;

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

Ако комплектът включва няколко възли, те ще се считат за едно парче.

$ ('span.test') appendTo (цел);

Ако в документа има три участъка с участък за изпитване, в края на целта ще бъде вмъкнат тристепенен участък.

цел на параметъра

Единственият входен параметър за метод jQuery appendTo () е дестинацията за вмъкване на елементи. Тя може да бъде посочена катоjQuery-set или като обикновен селектор:

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

Движещите се възли ще бъдат разположени в самия край на целевия елемент, след всички негови спомагателни възли.

Ако целта е набор jQuery, състоящ се от повече от един елемент, с всяка от тях ще се извърши манипулация. В този случай подвижното съдържание се копира, така че да може да се дублира на няколко места.

& lt; скрипт async = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
& lt ;! - fb_336x280_2 - & gt;

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

Изчислена стойност

Функцията jQuery appendTo () връща jQuery набор, състоящ се от подвижни елементи. Тази стойност е идентична с параметъра за съдържание в горния подпис на метода.

Прилагане на jQuery appendTo ()

Пример за използване на метода за вмъкване на генериран сайт.

Начална маркировка:


Първо дете

Второ дете

​​

Вмъкване на третия възел:

var child = $ ('
ThirdChild
');
child.appendTo ($ ('. Родител'));

Актуализиран код:


Първо дете

Второ дете

64) Трето дете

Пример за множество вложки.

Първоначална маркировка:



Дете 1



Дете 2



Съдържание 1

Съдържание 2


Преместване на елементите на съдържанието в края на целевите възли:


& lt; script type = "text /javascript" & gt;
може да blockSettings2 = {blockId: "R-A-70350-2", renderTo: "yandex_rtb_R-A-70350-2", async:! 0};
if (document.cookie.indexOf ("abmatch =")> = 0) blockSettings2.statId = 70350;
! функция (a, b, c, d, e) {a [c] = a [c] || [], a [c] .push (функция () {Ya.Context.AdvManager.render (blockSettings2)} , e = b.getElementsByTagName ("скрипт") , d = b.createElement ("скрипт"), d.type = "text /javascript", d.src = "//an.yandex.ru/system /context.js ", d.async =! 0e.parentNode.insertBefore (d, e)} (това, този документ," yandexContextAsyncCallbacks ");
$ ('. Съдържание') appendTo ('. Target');

Актуализирано маркиране:

 


Дете 1
Съдържание 1

Съдържание 2



Дете 2

Съдържание 1

Съдържание 2







Вмъкването е извършено и в двата елемента с целевия клас, а пространството на източника на елементите с класа съдържание е оставено празно.
Когато се работи с метода jQuery appendTo (), е важно да се разбере механиката на вмъкването на възлите и характеристиките на манипулациите с набори от елементи.

Свързани публикации

Пример за jQuery. Прости примери на jQuery скриптове jQuery плъзгачи. Създаване на плъзгач jQuery Как бързо да свържете jQuery jQuery: Свързване към уеб страница Как да свържете jquery към HTML документ Jquery, ajax: използване и функция