Вторник18 сентября
Компьютеры

Метод appendTo в jQuery: вставка элементов

2 апреля 2018

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

Базовый синтаксис метода jQuery appendTo:

Сигнатура функции jQuery appendTo

Контекст вызова

Метод вызывается для jQuery-набора, в котором может содержаться один или несколько DOM-узлов. Набор может быть сформирован как обычная выборка по селектору:

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

Также контекст может быть создан на лету:

$('<div>Hello, world</div>').appendTo(target);
$('<i>Some text</i>').appendTo(target);

В этом случае элементы создаются вручную, а не выбираются среди уже существующих в документе. Узлы, входящие в набор, будут перемещены в конец элемента target. Если они в данный момент находятся на странице, то функция jQuery appendTo() вырежет их с текущего места и переместит на новое.

Если в набор входит несколько узлов, они будут рассматриваться как единый фрагмент.

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

Если в документе три узла span с классом test, в конец target будет вставлена связка из трех элементов span.

Параметр target

Единственный входной параметр метода jQuery appendTo() - пункт назначения для вставки элементов. Он может быть указан как jQuery-набор или же как обычный селектор:

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

Перемещаемые узлы будут размещены в самом конце элемента target, после всех его дочерних подузлов.

Если target представляет собой jQuery-набор, состоящий более чем из одного элемента, манипуляция будет произведена с каждым из них. В этом случае перемещаемый контент копируется, чтобы можно было продублировать его в нескольких местах.

Видео по теме

Возвращаемое значение

Функция jQuery appendTo() возвращает jQuery-набор, состоящий из перемещенных элементов. Это значение идентично параметру content в приведенной выше сигнатуре метода.

Применение jQuery appendTo()

Пример использования метода для вставки сгенерированного узла.

Исходная разметка:

<div class="parent">
  <div class="first-child">First Child</div>
  <div class="second-child">Second Child</div>
</div>

Вставка третьего подузла:

var child = $('<div class="third-child">ThirdChild</div>');
child.appendTo($('.parent'));

Обновленная разметка:

<div class="parent">
  <div class="first-child">First Child</div>
  <div class="second-child">Second Child</div>
  <div class="third-child">Third Child</div>
</div>

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

Исходная разметка:

<div class="container">
  <div class="target">
    <div class="child">Child 1</div>
  </div>
  <div class="target">
    <div class="child">Child 2</div>
  </div>
  <div class="content-wrapper">
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
  </div>
</div>

Перемещение элементов .content в конец узлов .target:

$('.content').appendTo('.target');

Обновленная разметка:

<div class="container">
  <div class="target">
    <div class="child">Child 1</div>
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
  </div>
  <div class="target">
    <div class="child">Child 2</div>
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
  </div>
  <div class="content-wrapper">
    
  </div>
</div>

Вставка произошла в оба элемента с классом target, а исходное место элементов с классом content осталось пустым.

Использование метода appendTo()

При работе с методом jQuery appendTo() важно понимать механику вставки узлов и особенности манипуляций с наборами элементов.

Источник: fb.ru
Комментарии
Ваше имя:
Комментарий:
Введите символы: *
captcha
Обновить

Похожие материалы
Методы исследования в менеджменте и их сущность Бизнес
Методы исследования в менеджменте и их сущность

Методы исследования в менеджменте – инструменты, необходимые для решения задач управления в любой компании. В статье приведены основные подходы к изучению вопросов менеджмента организации.Что такое иссле...

Метод Митлайдера в русском варианте: отзывы, фото Бизнес
Метод Митлайдера в русском варианте: отзывы, фото

Обильный урожай, быстрый рост растений, отсутствие сорняков – это мечта садовода, вполне достижимая благодаря современным технологиям овощеводства. Метод Митлайдера в России пользуется популярностью уже более 20...

Вахтовый метод работы - что это такое? Трудовой кодекс, положение о вахтовом методе работы в России Бизнес
Вахтовый метод работы - что это такое? Трудовой кодекс, положение о вахтовом методе работы в России

Работа на вахте особенно популярна в России. Целые отрасли экономики функционируют, в значительной мере опираясь на такой формат трудовых отношений. Вахтовый метод работы - что это такое? Каковы особенности его законо...

Методы ценообразования в маркетинге Бизнес
Методы ценообразования в маркетинге

Каждый раз, когда мы приходим в магазин и видим изменение цен, нам становится интересно, на каком основании эти самые цены изменились, и вообще, кто несет за их формирование ответственность. Особенно поражает, когда о...

Экономические методы управления в менеджменте Бизнес
Экономические методы управления в менеджменте

Менеджмент пронизывает всю компанию, затрагивает все среды ее деятельности. Методы управления в менеджменте это комплексная совокупность приемов и способов, благодаря которым осуществляется воздействие на управляемый ...

Как Использовать Методы Убеждения В Бизнесе Бизнес
Как Использовать Методы Убеждения В Бизнесе

Словесное воздействие - эффективнейший инструмент, который необходим в бизнесе. Без правильно подобранного слова не добиться успехов. Вся предпринимательская деятельность основывается на общении. Тот, кто умеет хорошо...

Кто такая Мария Монтессори? Метод Монтессори в образовании Дом и семья
Кто такая Мария Монтессори? Метод Монтессори в образовании

Более ста лет исполнилось философии и наработкам Марии Монтессори, метод же ее работы не теряет актуальности по сей день. Эффективность педагогической системы подтверждена результатами научных исследований. Сады и шко...

Метод воспитания - это путь воздействия на жизнь человека. Роль метода воспитания в становлении личности Дом и семья
Метод воспитания - это путь воздействия на жизнь человека. Роль метода воспитания в становлении личности

Именно психология может объяснить, что такое воспитание. Метод воспитания - это определенный перечень правил, принципов и понятий, которые могут сформировать из человека личность и дать тот багаж знаний, который будет...

Технология производства работ методом Домашний уют
Технология производства работ методом "стена в грунте"

В современных мегаполисах все чаще прослеживается тенденция к более рациональному использованию пространства и уплотнению застройки. Эти обстоятельства диктуют строительным компаниям определенные условия. На поверхнос...

Цветы в горшках – универсальный элемент озеленения Домашний уют
Цветы в горшках – универсальный элемент озеленения

Сегодня контейнерное озеленение получает всё большую популярность в оформлении интерьеров помещений и дизайне садовых участков. Цветы в горшках, корзинах и всевозможных ящичках служат отличным декоративным украшением....