Pro jQuery
Адам Фриман
Вставка дочерних элементов и элементов-потомков
Теперь, когда вы узнали, как создаются элементы, можно начать вставлять их в документ. Мы начнем с изучения методов, которые позволяют вставлять один элемент в другой, чтобы создать дочерние элементы или элементы-потомки. В таблице 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: Динамическая вставка элементов в зависимости от используемой функции