На этом шаге мы рассмотрим первый шаг в алгоритме создания врезок.
На многих веб-сайтах, как и в печатных изданиях, для выделения небольших фрагментов текста и с целью привлечения внимания читателя используются врезки. Мы легко можем реализовать их с помощью метода .clone(). Для начала посмотрим на изменения в третьем параграфе текста из нашего примера:
<span class="pull-quote">Все завидовали согласию<span class="drop">, царствующему</span> между надменным Троекуровым и <strong>бедным</strong> его соседом</span> и удивлялись смелости сего последнего, когда он за столом у Кирила Петровича прямо высказывал свое мнение, не заботясь о том, противуречило ли оно мнениям хозяина. Некоторые пытались было ему подражать и выдти из пределов должного повиновения, но Кирила Петрович так их пугнул, что навсегда отбил у них охоту к таковым <a href="http://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%BA%D1%83%D1%88%D0 %B5%D0%BD%D0%B8%D0%B5_%D0%BD%D0%B0_%D0%BF%D1%80%D0%B5%D1 %81%D1%82%D1%83%D0%BF%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5"> покушениям</a>, и Дубровский один остался вне общего закона. <span class="footnote">Нечаянный случай все расстроил и переменил.</span></p>
Обратите внимание, что параграф начинается с элемента <span class="pull-quote">. Элементы с этим классом мы и будем копировать. После копирования текста внутри элемента <span> он будет вставляться в другое место, поэтому нам необходимо изменить его оформление для отделения от остальной части текста.
На следующем шаге мы рассмотрим стили CSS.