Как в jquery добавить элемент в элемент

Здравствуйте, уважаемый читатель. В этой рубрике я буду писать о различных методах 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() можно использовать другие методы для скрытия элемента, о них читайте в этой статье.

Да, это реклама, но надеюсь, она будет полезна вам. GetUniq это сервис для вебмастеров и всех работающих с трафиком людей, с помощью которого можно выгоднее пополнять счета в кабинетах рекламных сетей, таких как Яндекс.Директ, MyTarget, ВК Таргет и другие. Без использования сервиса вам придется заплатить 1180 рублей за пополнение счета в Директе на 1000, а используя возможности Getuniq за эти же 1180 на ваш счет поступит 1100-1200 рублей! То же самое для всех других сетей. Я сам уже начал использовать и порекомендовал всем знакомым вебмастерам, рекомендую и вам. При желании, по этой ссылке вы можете почитать мой обзор сервиса.

Как в jquery добавить html код другим методом

В этой статье я показал вам метод append (), но помимо него можно использовать html (). Пример:

$(".menu li").html("Какой-то текст");

Во все пункты списка, которые лежат в контейнере .menu, будт добавлены спаны с текстом. Попробуйте также самостоятельно использовать этот метод.

Ну а у меня на сегодня, пожалуй, все. Если у вас есть какие-то вопросы, пишите в комментарии, буду рад ответить.

Добавить комментарий