Главная страница   /   7.2. Вставка дочерних элементов и элементов-потомков (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

7.2. Вставка дочерних элементов и элементов-потомков

Теперь, когда вы узнали, как создаются элементы, можно начать вставлять их в документ. Мы начнем с изучения методов, которые позволяют вставлять один элемент в другой, чтобы создать дочерние элементы или элементы-потомки. В таблице 7-2 описаны эти методы.

Таблица 7-2: Методы для вставки дочерних элементов и элементов-потомков
Метод Описание
append(HTML)
append(jQuery)
append(HTMLElement[])
Вставляет указанные элементы в качестве последних дочерних для всех элементов в DOM
prepend(HTML)
prepend(jQuery)
prepend(HTMLElement[])
Вставляет указанные элементы в качестве первых дочерних для всех элементов в DOM
appendTo(jQuery)
appendTo(HTMLElement[])
Вставляет элементы в объект jQuery в качестве последних дочерних для элементов, указанных в аргументе
prependTo(HTML)
prependTo(jQuery)
prependTo(HTMLElement[])
Вставляет элементы в объект jQuery в качестве первых дочерних для элементов, указанных в аргументе
append(function)
prepend(function)
Добавляет в конец или начало результат функции элементам в объекте jQuery

Совет

Дочерние элементы можно также вставить, используя метод wrapInner, о котором речь идет в разделе "Оборачивание (враппинг) содержания элементов". Этот метод вставляет новый дочерний элемент между элементом и его существующими дочерними элементами. Другим способом является использование метода html, который я описываю в главе 8.

Элементы, которые вы указываете в качестве аргументов, вставляются как дочерние элементы для каждого элемента в объекте jQuery, и поэтому очень важно использовать те приемы, о которых я говорил в главе 6 для управления выборкой, чтобы она содержала только те элементы, с которыми вы будете работать. В листинге 7-4 показан пример использования метода append.

Листинг 7-4: Использования метода append
<script type="text/javascript">
	$(document).ready(function () {
		var newElems = $("<div class='dcell'></div>")
			.append("<img src='lily.png'/>")
			.append("<label for='lily'>Lily:</label>")
			.append("<input name='lily' value='0' required />");

		newElems.css("border", "thick solid red");

		$('#row1').append(newElems);
	});
</script>

В этом скрипте я использовал метод append двумя различными способами: во-первых, для того чтобы создать свой набор новых элементов, а во-вторых, чтобы вставить эти элементы в HTML документ. Поскольку это первый метод DOM манипуляции, с которым вы встретились, я уделю время на то, чтобы показать некоторые поведенческие особенности, которые помогут вам избежать jQuery ошибок, связанных с DOM. Но сначала давайте посмотрим на результат работы скрипта. На рисунке 7-1 можно увидеть результат добавления новых элементов.

Рисунок 7-1: Вставка новых элементов в документ

Первая вещь, на которую нужно обратить внимание, – это способ, которым я создал новые элементы, используя метод append:

var newElems = $("<div class='dcell'/>").append("<img src='lily.png'/>")
	.append("<label for='lily'>Lily:</label>")
	.append("<input name='lily' value='0' required />");

Я мог просто создать один более крупный HTML блок, который бы содержал все элементы, но я хотел показать ключевой аспект методов манипуляции DOM, суть которого заключается в том, что объекты jQuery, возвращаемые этими методами, содержат те же самые элементы, как и объекты, для которых эти методы были вызваны. Например, я начал с объекта jQuery, который содержал элемент div, и результатом каждого метода append был объект jQuery, который содержал тот же элемент div, а не элемент, который я добавил. Это обозначает, что вызов цепочек append создает много новых дочерних элементов для первоначально выбранных элементов.

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

newElems.css("border", "thick solid red");

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

Наконец, я добавил новые элементы в документ:

$('#row1').append(newElems);

Новые элементы добавляются к каждому элементу в выборке. В этой выборке только один элемент (один с id row1), и теперь на странице цветочного магазина есть новый продукт – лилия.

Добавление новых дочерних элементов в начало

Добавлением к методу append является метод prepend, который вставляет новые элементы в качестве первых дочерних для элементов в объекте jQuery. В листинге 7-5 представлен пример.

Листинг 7-5: Использование метода prepend
<script type="text/javascript">
		$(document).ready(function () {
			var orchidElems = $("<div class='dcell'/>")
				.append("<img src='orchid.png'/>")
				.append("<label for='orchid'>Orchid:</label>")
				.append("<input name='orchid' value='0' required />");

			var newElems = $("<div class='dcell'/>")
				.append("<img src='lily.png'/>")
				.append("<label for='lily'>Lily:</label>")
				.append("<input name='lily' value='0' required />")
				.add(orchidElems);

			newElems.css("border", "thick solid red");

			$('#row1, #row2').prepend(newElems);
		});
	</script>

В дополнение к методу prepend, этот скрипт показывает другую характеристику DOM манипуляции: все элементы, переданные в качестве аргументов одному из этих методов, добавляются в качестве дочерних всем элементам в объекте jQuery. В этом примере я создал два элемента div, один для лилий и один для орхидей. Я использовал метод add (выделенный в этом листинге), чтобы добавить оба набора элементов в один jQuery.

Совет

Метод add также может принять строку, содержащую HTML фрагмент. Можно использовать эту возможность в качестве альтернативы для создания новых элементов, используя объекты jQuery.

Затем я создал другой jQuery объект, который содержит элементы со значениями id row1 и row2, и использовал метод prepend, чтобы вставить элементы для орхидеи и лилии в документ. На рисунке 7-2 представлен результат.

Рисунок 7-2: Добавление нескольких новых элементов для нескольких выбранных элементов

Новые элементы снова выделены красной рамкой. Как видно на рисунке, оба элемента для лилии и орхидеи добавлены в обе строки. В качестве альтернативы к использованию метода add, можно добавить несколько элементов в методы DOM модификации, как показано в листинге 7-6.

Листинг 7-6: Добавление нескольких аргументов в метод prepend
<script type="text/javascript">
		$(document).ready(function () {
			var orchidElems = $("<div class='dcell'/>")
				.append("<img src='orchid.png'/>")
				.append("<label for='orchid'>Orchid:</label>")
				.append("<input name='orchid' value='0' required />");

			var lilyElems = $("<div class='dcell'/>")
				.append("<img src='lily.png'/>")
				.append("<label for='lily'>Lily:</label>")
				.append("<input name='lily' value='0' required />");

			lilyElems.css("border", "thick solid red");

			$('#row1, #row2').prepend(lilyElems, orchidElems);
		});
	</script>

Вставка одних и тех же элементов на разные позиции

Добавлять новые элементы в документ можно только один раз. С этой точки зрения, использование их в качестве аргументов для метода вставки в DOM скорее перемещает элементы, а не дублирует их. В листинге 7-7 показана эта проблема.

Листинг 7-7: Добавление новых элементов в документ дважды
<script type="text/javascript">
	$(document).ready(function () {
		var orchidElems = $("<div class='dcell'/>")
			.append("<img src='orchid.png'/>")
			.append("<label for='orchid'>Orchid:</label>")
			.append("<input name='orchid' value='0' required />");

		var newElems = $("<div class='dcell'/>")
			.append("<img src='lily.png'/>")
			.append("<label for='lily'>Lily:</label>")
			.append("<input name='lily' value='0' required />").add(orchidElems);

		newElems.css("border", "thick solid red");

		$('#row1').append(newElems);
		$('#row2').prepend(newElems);
	});
</script>

Цель этого скрипта очевидна: добавить в конец новые элементы для row1 и добавить их в начало для row2. Конечно же, этого не произошло, как видно на рисунке 7-3.

Рисунок 7-3: Попытка (и неудача) добавить новые элементы в документ дважды

Элементы были добавлены в начало row1, но вызов метода prepend имел эффект перемещения элементов, а не добавления их дважды. Для решения этой проблемы нужно создать копии элементов, которые будут вставлены, используя метод clone. В листинге 7-8 показан исправленный скрипт.

Листинг 7-8: Клонирование элементов для добавления их в документ больше одного раза
<script type="text/javascript">
	$(document).ready(function () {
		var orchidElems = $("<div class='dcell'/>")
			.append("<img src='orchid.png'/>")
			.append("<label for='orchid'>Orchid:</label>")
			.append("<input name='orchid' value='0' required />");

		var newElems = $("<div class='dcell'/>")
			.append("<img src='lily.png'/>")
			.append("<label for='lily'>Lily:</label>")
			.append("<input name='lily' value='0' required />").add(orchidElems);

		newElems.css("border", "thick solid red");

		$('#row1').append(newElems);
		$('#row2').prepend(newElems.clone());
	});
</script>

Сейчас элементы скопированы и вставлены в обоих местах, как показано на рисунке 7-4.

Рисунок 7-4: Клонирование и вставка элементов

Вставка с объекта jQuery

Можно использовать методы appendTo и prependTo, чтобы изменить отношения между элементами. Элементы в объекте jQuery вставляются в качестве дочерних элементов тех элементов, которые указаны в аргументе. В листинге 7-9 представлен пример.

Листинг 7-9: Использование метода appendTo
<script type="text/javascript">
	$(document).ready(function () {
		var newElems = $("<div class='dcell'/>");
		$('img').appendTo(newElems);
		$('#row1').append(newElems);
	});
</script>

В этом скрипте я создал объекты jQuery, содержащие новый div элемент и новые img элементы. Потом я использовал метод appendTo, чтобы добавить элементы img в качестве дочерних для элемента div. Результат можно увидеть на рисунке 7-5. Результат этого скрипта заключается в передвижении элементов img в новый элемент div, который я добавил в элемент row1.

Рисунок 7-5: Использование метода appendTo

Вставка элементов с использованием функции

В методы append и prepend можно добавить function. Это позволит динамически вставить дочерние элементы для элементов, выбранных в объекте jQuery, как показано в листинге 7-10.

Листинг 7-10: Добавление дочерних элементов динамически с использованием функции
<script type="text/javascript">
	$(document).ready(function () {
		var orchidElems = $("<div class='dcell'/>")
			.append("<img src='orchid.png'/>")
			.append("<label for='orchid'>Orchid:</label>")
			.append("<input name='orchid' value='0' required />");

		var lilyElems = $("<div class='dcell'/>")
			.append("<img src='lily.png'/>")
			.append("<label for='lily'>Lily:</label>")
			.append("<input name='lily' value='0' required />");

		$(orchidElems).add(lilyElems).css("border", "thick solid red");

		$('div.drow').append(function (index, html) {
			if (this.id == "row1") {
				return orchidElems;
			} else {
				return lilyElems;
			}
		});
	});
</script>

Эта функция вызывается один раз для каждого элемента в объекте jQuery. Аргументами, которые передаются функции, являются индекс элемента в выборке и HTML того элемента, который обрабатывается; HTML является строкой. Кроме того, значение этой переменной устанавливается в соответствующий HTMLElement. Результат функции будут добавлен в начало или конец элемента, который обрабатывается. Вы можете вернуть HTML фрагмент, один или несколько HTMLElement объектов или jQuery объект.

В этом примере я создаю набор элементов для продукции лилии и орхидеи, а затем возвращаю их из функции append, основываясь на значении свойства id. Вы можете увидеть результат на рисунке 7-6.

Рисунок 7-6: Динамическая вставка элементов в зависимости от используемой функции