Здравствуйте, уважаемый читатель. В этой рубрике я буду писать о различных методах jQuery, которые позволяют нам выполнять нужные действия. В частности, сегодня я хотел бы показать, как в jquery добавить элемент в элемент.
Посмотрим на примере
Возможность динамическим образом добавить теги и содержимое внутрь какого-нибудь элемента является очень полезной, так как очень часто используется. jQuery очень сильно упрощает реализацию этого.
Давайте создадим в html обычный блок с идентификатором:
<div id = "wrap"></div>
Я ему добавлю немного стилей – размеры и черную рамку.
Допустим, сделаем так, чтобы при наведении на него в нем появлялся какой-то текст. Чтобы писать наши веб-сценарии, нужно сначала подключить библиотеку jQuery, смотрите здесь об этом статью.
function showtext(){
$('#wrap').append("<p>Это наш текст, который при определенных условиях отобразится в блоке</p>")
}
Из этого делаем вывод, что за вставку информации внутрь нашего элемента отвечает метод append. Причем он позволяет не просто вставить текст, а еще и теги. Таким образом, вы можете добавить внутрь элемента что угодно: картинку, список, таблицу и т.д.
Остается только привязать событие, добавив атрибут:
onmouseover = "showtext()"
Я выбрал событие – наведение курсора мыши. Таким образом, формулируем наш веб-сценарий полностью: при наведении мыши на блок #wrap, в него добавляется абзац текста. Проверяем в действии и убеждаемся, что так и есть.
Проблема
Но тут нас поджидает проблема: абзац не исчезает, а при повторных наведениях добавляются аналогичные абзацы. Проблему можно решить, добавив функцию, которая при уводе курсора с блока будет удалять абзац в нем. Добавим к блоку такой атрибут:
onmouseout = "deletetext()"
Соответственно, теперь нам надо написать саму функцию:
function deletetext(){
$('p').remove();
}
В данном случае, поскольку на моей странице только один абзац, то я обратился к нему по глобальному селектору тега. По-хорошему, обращаться нужно именно к одному абзацу по какому-нибудь стилевому классу.
Теперь наведите курсор на блок, после чего уведите его. Абзац будет появляться, а потом также удаляться. Вместо remove() можно использовать другие методы для скрытия элемента, о них читайте в этой статье.
Как в jquery добавить html код другим методом
В этой статье я показал вам метод append(), но помимо него можно использовать html(). Пример:
$(".menu li").html("Какой-то текст");
Во все пункты списка, которые лежат в контейнере .menu, будт добавлены спаны с текстом. Попробуйте также самостоятельно использовать этот метод.
Ну а у меня на сегодня, пожалуй, все. Если у вас есть какие-то вопросы, пишите в комментарии, буду рад ответить.