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

Зачастую нам нужно создать новые элементы, прежде чем вставить их в DOM (хотя можно вставить существующие элементы, о чем я расскажу далее в этой главе). В следующих разделах я покажу несколько способов, которыми можно создать контент.

Совет

Важно понимать, что создание новых элементов не включает их автоматически в DOM. Нужно четко сказать jQuery, где в документе должны располагаться элементы, о чем я расскажу позже в этой главе.

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

Можно создать новые элементы, если добавить строку HTML фрагмента в $ функцию. jQuery парсит (разбирает) строку и создает соответствующие DOM объекты. В листинге 7-1 содержится пример.

Листинг 7-1: Создание новых элементов с использованием $ функции

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<script src="jquery-1.7.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script type="text/javascript">
		$(document).ready(function () {

			var newElems = $('<div class="dcell"><img src="lily.png"/></div>');

			newElems.each(function (index, elem) {
				console.log("New element: " + elem.tagName + " " + elem.className);
			});

			newElems.children().each(function (index, elem) {
				console.log("Child: " + elem.tagName + " " + elem.src);
			});
		});
	</script>
</head>
<body>
	<h1>Jacqui's Flower Shop</h1>
	<form method="post">
		<div id="oblock">
			<div class="dtable">
				<div id="row1" class="drow">
					<div class="dcell">
						<img src="astor.png" /><label for="astor">Astor:</label>
						<input name="astor" value="0" required>
					</div>
					<div class="dcell">
						<img src="daffodil.png" /><label for="daffodil">Daffodil:</label>
						<input name="daffodil" value="0" required>
					</div>
					<div class="dcell">
						<img src="rose.png" /><label for="rose">Rose:</label>
						<input name="rose" value="0" required>
					</div>
				</div>
				<div id="row2" class="drow">
					<div class="dcell">
						<img src="peony.png" /><label for="peony">Peony:</label>
						<input name="peony" value="0" required>
					</div>
					<div class="dcell">
						<img src="primula.png" /><label for="primula">Primula:</label>
						<input name="primula" value="0" required>
					</div>
					<div class="dcell">
						<img src="snowdrop.png" /><label for="snowdrop">Snowdrop:</label>
						<input name="snowdrop" value="0" required>
					</div>
				</div>
			</div>
		</div>
		<div id="buttonDiv">
			<button type="submit">Place Order</button></div>
	</form>
</body>
</html>

В этом примере я создал два новых элемента из HTML фрагмента: элемент div и элемент img. Так как мы имеем дело с HTML, можно использовать фрагменты, которые содержат структуру. В данном случае элемент img является дочерним элементом элемента div.

Объект jQuery, возвращенный $ функцией, содержит только элементы высокого уровня из HTML фрагмента. Чтобы наглядно показать это, я использовал функцию each, чтобы вывести информацию о каждом элементе в объекте jQuery на консоль. jQuery не сбрасывает дочерние элементы. Они доступны через обычные навигационные методы (которые я описал в главе 6). Чтобы продемонстрировать это, я вызвал метод children для объекта jQuery и также вывел информацию о каждом дочернем элементе на консоль. Результат работы скрипта следующий:

New element: DIV dcell
Child: IMG http://www.jacquisflowershop.com/jquery/lily.png

Создание новых элементов при помощи клонирования существующих

Можно создавать новые элементы из существующих, используя метод clone. Он дублирует все элементы в объекте jQuery вместе со всеми их потомками. В листинге 7-2 показан пример.

Листинг 7-2: Клонирование элементов

<script type="text/javascript">
		$(document).ready(function () {
			var newElems = $('div.dcell').clone();

			newElems.each(function (index, elem) {
				console.log("New element: " + elem.tagName + " " + elem.className);
			});

			newElems.children('img').each(function (index, elem) {
				console.log("Child: " + elem.tagName + " " + elem.src);
			});
		});
	</script>

В этом скрипте я выбрал и клонировал все элементы div, которые являются членами класса dcell. Чтобы показать, что элементы-потомки тоже были клонированы, я использовал метод children с селектором, чтобы получить клонированные элементы img. Я вывел информацию об элементах div и img на консоль и получил следующий результат:

New element: DIV dcell
New element: DIV dcell
New element: DIV dcell
New element: DIV dcell
New element: DIV dcell
New element: DIV dcell
Child: IMG http://www.jacquisflowershop.com/jquery/astor.png
Child: IMG http://www.jacquisflowershop.com/jquery/daffodil.png
Child: IMG http://www.jacquisflowershop.com/jquery/rose.png
Child: IMG http://www.jacquisflowershop.com/jquery/peony.png
Child: IMG http://www.jacquisflowershop.com/jquery/primula.png
Child: IMG http://www.jacquisflowershop.com/jquery/snowdrop.png

Совет
Можно передать значение true в качестве аргумента методу clone, чтобы включить обработчики событий и данных, связанных с элементами во время процесса копирования. Если опустить этот аргумент или указать значение false, обработчики событий и данных будут опущены. Я расскажу о поддержке событий jQuery в главе 9 и объясню, как связать данные с элементами в главе 8.

Создание элементов с использованием DOM API

Можно использовать напрямую DOM API, чтобы создать новые объекты HTMLElement, по существу это и делает jQuery, если вы используете другие технические приемы. Я не буду объяснять подробности DOM API, но в листинге 7-3 содержится простой пример, чтобы вы понимали, как можно использовать этот прием.

Листинг 7-3: Использование DOM API для создания новых элементов

<script type="text/javascript">
	$(document).ready(function () {

		var divElem = document.createElement("div");
		divElem.classList.add("dcell");

		var imgElem = document.createElement("img");
		imgElem.src = "lily.png";

		divElem.appendChild(imgElem);

		var newElems = $(divElem);

		newElems.each(function (index, elem) {
			console.log("New element: " + elem.tagName + " " + elem.className);
		});

		newElems.children('img').each(function (index, elem) {
			console.log("Child: " + elem.tagName + " " + elem.src);
		});
	});
</script>

В этом примере я создаю и конфигурирую div HTMLElement и img HTMLElement и назначаю img дочерним элементом для div, также как я делал в первом примере. Нет ничего неправильного в создании элементов таким способом, но поскольку эта книга о jQuery, я не буду отвлекаться от темы и углубляться в DOM API.

Я передаю div HTMLElement в качестве аргумента jQuery $ функции, таким образом я использую each функцию также, как и в других примерах. Результат на консоли следующий:

New element: DIV dcell
Child: IMG http://www.jacquisflowershop.com/jquery/lily.png

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

или RSS канал: