Просмотров: 1 370

Метод appendTo jQuery. Как присоединить html-код к элементу на веб-странице.

Задача. Предположим, что на веб-странице есть какой-либо элемент, внутри которого нужно добавить некоторое html-содержимое.

Допустим, что это будет элемент div с классом elem.

<div class="elem">
<p>Содержимое элемента div</p>
</div>

Каким образом с помощью Javascript и jQuery можно к такому элементу div добавить дополнительный html-код?

Задача подобного рода очень часто встречается при разработке скриптов, когда нужно динамически, в зависимости от каких-либо условий, формировать содержимое элемента.

Решение.

Давайте рассмотрим один из способов, как это можно сделать с помощью jQuery.

В библиотеке jQuery есть специальный метод, который позволяет добавлять некоторое html-содержимое к выбранному селектору. Это метод appendTo.

Синтаксис здесь следующий.

$('html-содержимое, которое нужно добавить').appendTo("селектор");

html-содержимое будет добавляться в конец выбранного элемента.

Чтобы наглядно уведеть, как это все работает, давайте рассмотрим следующий пример.

HTML:

<div class="elem">
<p>Содержимое элемента div</p>
</div>

Javascript

$('<p>Добавленный абзац</p>').appendTo(".elem");