На этом шаге мы рассмотрим методы, используемые для добавления новых элементов.
В библиотеке jQuery имеется два метода, которые позволяют добавлять элементы перед другими элементами: .insertBefore() и .before(). Эти два метода реализуют одну и ту же операцию и отличаются только способом объединения в цепочку с другими методами. Другие два метода, .insertAfter() и .after(), точно так же взаимосвязаны между собой, но, как следует из их названий, они вставляют элементы после других элементов. Для добавления ссылок На начало мы будем использовать метод .insertAfter():
$(document).ready(function() {
$('<a href="#top">На начало</a>').insertAfter('div.chapter p');
$('<a id="top"></a>');
});
Метод .after() дает тот же эффект, что и метод .insertAfter(), но в его случае выражение селектора должно предшествовать методу, а не следовать за ним. При использовании метода .after() первая строка внутри $(document).ready() могла бы выглядеть так:
$('div.chapter p').after('<a href="#top">На начало</a>');
При использовании метода .insertAfter() мы можем продолжать воздействовать на вновь созданный элемент <а>, добавляя в цепочку другие методы. А при использовании метода .after() дополнительные методы в цепочке будут воздействовать на элементы, соответствующие селектору $('div.chapter р').
Теперь, когда мы действительно вставили ссылки в страницу (и в дерево DOM) после каждого параграфа, находящегося в пределах элемента <div class="chapter">, можно наблюдать появление ссылок На начало на экране.
К сожалению, эти ссылки пока не работают. Нам все еще необходимо добавить в страницу якорь со значением атрибута id="top". Для этого можно воспользоваться одним из методов добавления элементов внутрь других элементов.
$(document).ready(function() {
$('<a href="#top">На начало</a>').insertAfter('div.chapter p');
$('<a id="top"></a>').prependTo('body');
});
Дополнительная строка программного кода вставляет якорь непосредственно в начало элемента <body>, или, другими словами, в самое начало страницы. Теперь, задействовав метод .insertAfter() для добавления ссылок и метод .prependTo() для добавления якоря, мы получим множество вполне работоспособных ссылок На начало.
Рис.1. Работоспособные ссылки На начало
Текст этого примера можно взять здесь.На следующем шаге мы закончим изучение этого вопроса.
