Как перемещать элементы внтри html структуры с помощью jQuery

Как говорится, краткость - сестра таланта, поэтому попробую в примерах объяснить принципы перемещения или одновременного перемещения и создания html элементов в jQuery. 

Для этого чаще всего используются appendTo(), append(), prependTo() и prepend(). Поняв принцип одного из методов вы легко освоите остальные.

appendTo() и append()

Позволяют создавать/перемещать элементы внутрь выбранного элемента, в конец его структуры. Данные функции ничем не отличаются, за исключением удобства использования. Мне больше нравится appendTo().

Синтаксис: $('что создаем').appendTo('внутрь какого элемента создаем');

Синтаксис: $('внутрь какого элемента создаем').append('что создаем');

Создание элементов

Примеры:

Пусть у нас такая структура:
<div id="main">
<div id="first"></div>
<div id="second"></div>
</div>

Создаем div внутри #main (после #second):
$('<div id="third" style="background: #eee; font-size:20px;">3333333333</div>').appendTo('#main');

Создадим div внутри #main (после #second) с красной заливкой:
$('<div id="third">Третий</div>').css('background', 'red').appendTo('#main');

Перемещение элементов

Методы appendTo и append позволяют перемещать выбранные элементы внутрь заданных. Для перемещения надо указать класс или id или name, но не сами теги и блоки

Примеры:

Пусть у нас такая структура:
<div id="main">
<div id="third"></div>
<div id="fourth"></div>
</div>

Надо переместить #fourth внутрь #third
$('#fourth').appendTo('#third');
Получим: <div id="main"> <div id="third"><div id="fourth"></div></div> </div>

Перемещает все элементы с классом fourth внутрь #third
$('.fourth').appendTo('#third');

Перемещаем input внутрь div по его именю
<div id="main">Поле: </div> <input type="text" name="da"/>
$('[name=da]').appendTo('#main');

prependTo() и prepend()

Эти функции позволяют создавать/перемещать элементы внутрь выбранного элемента, в начало структуры prependTo() и prepend(). Ничем не отличаются, за исключением удобства использования. Чаще использую prependTo().

Синтаксис: $('что создаем').prependTo('внутрь какого элемента создаем');

Синтаксис: $('внутрь какого элемента создаем').prepend('что создаем');

Создание элементов

Пример:

Пусть у нас такая структура:
<div id="main">
<div id="first">Первый</div>
</div>

Добавим <div id="zero">Нулевой</div> внутрь #main перед #first
$('<div id="zero">Нулевой</div>').prependTo('#main');
Получим: <div id="main"> <div id="zero">Нулевой</div> <div id="first">Первый</div> </div>

Перемещение элементов

Функции prependTo() и prepend() позволяют перемещать выбранные элементы внутрь заданных. Для перемещения надо указать класс или id или name, но не сами теги и блоки.

Пример:

Пусть у нас такая структура:
<div id="main">Поле: </div> <input type="text" name="da"/>

Перемещаем input внутрь div по его имени
$('[name=da]').prependTo('#main');

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Введите капчу: