Оглавление

.append() и .prepend()

 Функции .append() и .prepend() присоединяют к объекту jQuery, из которого они вызываются, элементы, передаваемые им в качестве параметров. Единственное различие между ними состоит в том, что функция . .append() присоединяет элементы в конец объекта, а .prepend() — в начало.

 
В обоих случаях присоединение содержимого осуществляется внутри соответствующих элементов, т.е. если отыскиваются все абзацы на странице и к ним присоединяется новое предложение "Это было добавлено jQuery", то оно будет присоединяться внутри абзаца, до закрывающего дескриптора (</p>).

 
Убедитесь в этом, введя в консоли следующий код:
$("p").append("Это было добавлено jQuery.")

 
В результате выполнения этого кода предложение будет добавлено в конец каждого абзаца перед закрывающим дескриптором. Это довольно очевидно, ибо если бы текст находился за закрывающим дескриптором абзаца, то он перешел бы на следующую строку.

Исследование HTML с помощью средства просмотра элементов Firebug
В сказанном выше можно непосредственно убедиться, используя средство просмотра элементов (Element Inspector), предоставляемое консолью Firebug. В верхней части консоли слева имеется кнопка с изображением указателя мыши над прямоугольником (рис. 2.3). Щелкните на ней для активизации указанного средства.

 

Кнопка активизации средства просмотра элементов

 Рис- 2.3. Кнопка активизации средства просмотра элементов

 

После активизации данного средства наведение указателя мыши на любой элемент в окне браузера будет сопровождаться выделением этого элемента голубой рамкой. Наведите указатель на один из абзацев, к которому вы только что присоединили текст, и щелкните на нем. Это активизирует панель HTML с подсвеченным и свернутым текущим элементом. Расположенная рядом с элементом кнопка позволяет развернуть его (рис. 2.4).

 

Свернутый элемент, отображаемый после выполнения на нем щелчка

Рис. 2.4. Свернутый элемент, отображаемый после выполнения на нем щелчка

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

 

Отображение развернутого элемента

Рис. 2.5. Отображение развернутого элемента, включая динамически добавленный текст

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

 

Функции . append () и .prepend () также позволяют добавлять в DOM новые элементы. Например, чтобы добавить новый абзац вверху страницы, присоедините новый элемент к элементу body, используя приведенный ниже код.

var para = $ ("<p>",   {
   "text":"Я в новом абзаце!", "css":{"background":"yellow"}
});
$("body").prepend(para);

 

Примечание. В этом примере, прежде чем присоединять новый элемент к телу документа, создается переменная для его хранения. Это сделано для того, чтобы текст сценария стал более понятным. Мы часто будем при-менять эту методику на протяжении всей книги

 


После выполнения приведенного выше кода в верхней части окна браузера появится новый абзац с желтым фоном (рис. 2.6).

 

Вид нового абзаца после его присоединения к телу документа

Рис. 2.6. Вид нового абзаца после его присоединения к телу документа

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити