На этом шаге мы рассмотрим методы, используемые для размещения сносок в конце документа.
Теперь мы можем извлечь сноски и вставить их между элементами <div class="chapter"> и <div id="footer">. Имейте в виду, что даже в случае неявных итераций порядок вставки предопределен, вставка в дерево DOM производится сверху вниз. Поскольку очень важно соблюсти правильный порядок следования сносок в новом месте их расположения, нам следует использовать метод .insertBefore('#footer').
В результате каждая следующая сноска будет вставляться непосредственно перед элементом <div id="footer">, то есть сноска 1 будет помещена между элементами <div class="chapter"> и <div id="footer">, сноска 2 будет помещена между сноской 1 и элементом <div id="footer">, и так далее. Использование метода .insertAfter('div.chapter') привело бы к размещению сносок в обратном порядке. В настоящее время наш программный код выглядит, как показано ниже:
$(document).ready(function() {
$('span.footnote').insertBefore('#footer');
});
Рис.1. Текст сносок выводится курсивом внизу документа
Полный текст этого примера можно взять здесь.К сожалению, мы столкнулись с крупной проблемой. Сноски располагаются внутри тегов <span>, а это означает, что по умолчанию они отображаются в одной строке друг за другом без разделения, как показано на рисунке 1.
На следующем шаге мы откорректируем приведенный пример.
