Как в 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, будет добавлен указанный текст, причем прошлое наполнение тегов li пропадет.

Понравилась статья? Поделиться с друзьями:
Добавить комментарий