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

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

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

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

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

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

Платное/бесплатное по JavaScript/jQuery на других сайтах

Большой платный курс по JavaScript/jQuery

Уроки по javascript-фреймворку Angular 4

Премиум уроки по javascript и другим технологиям

Бесплатный курс по ReactJS для новичков

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: