Записи. Создание элемента одной функцией на JavaScript используя библиотеку jQuery
11 лет назадМетки: javaScript, jQuery, jquery создание функции, Создайте с помощью javascript (по щелчку) список элементов , создание элемента по клику js
Благодаря постепенному развитию браузеров и разных скриптов, в настоящий момент используя библиотеку jQuery добавить на страницу элемент стало проще простого.
Просто передаём в вызов текст того элемента который мы хотим создать:
$('<div/>')Но создать элемент это мало, надо его ещё добавить на страницу. Для этих целей есть ряд функций. Обычно в своей практике использую следующие:
- .prependTo(), .appendTo() - добавить к содержимому элемента(ов) в начало или конец.
- .insetBefore(), .insertAfter() - Вставить до или после элемента(ов).
Ну, а благодаря тому, что после вызова каждой функции мы получаем опять ссылку на объект(ы), мы можем дополнительно повесить обработчик события, или сделать что-то ещё. В результате самый просто код будет выглядеть так:
$('<div/>')
.css('cursor','pointer')
.click(function(){alert('Спасибо что нажали')})
.text('Нажми меня')
.insertBefore('img');Данный пример:
- создаёт блочный элемент div;
- добавляет ему свойство при котором курсор при наведении будет становиться как при наведении на ссылку;
- Добавляет обработчик щелчка по элементы с выводом благодарности за нажатие;
- добавляет текст с просьбой нажать
- и главное, добавляет это всё перед каждым изображением на сайте.
Если желаете проверить, то можете скопировать данный код в адресную строку и если на сайте применяется jQuery, то вы уведите как он работает.
javascript:$('<div/>').css('cursor','pointer').click(function(){alert('Спасибо что нажали')}).text('Нажми меня').insertBefore('img');