Узнайте, как создать элемент в jQuery
Создание нового элемента – одна из самых основных задач, которую вы можете решить с помощью библиотеки jQuery JavaScript. При использовании jQuery задача намного проще, чем эквивалентный подход с объектной моделью документа (DOM). Вы также найдете его более гибким и выразительным, чем больше вы будете использовать jQuery.
Для достижения определенной цели вам потребуется добавить свой элемент на веб-страницу. Узнайте, как добавить новый элемент списка или заменить абзац новым содержимым с помощью jQuery.
Что такое jQuery?
Библиотека jQuery представляет собой набор кода JavaScript с двумя основными целями:
- Он упрощает общие операции JavaScript.
- Он решает проблемы перекрестной совместимости JavaScript между различными браузерами.
Вторая цель направлена на устранение ошибок, но также устраняет различия в реализации между браузерами. Обе цели менее необходимы, чем раньше, поскольку браузеры со временем улучшаются. Но jQuery по-прежнему может быть ценным инструментом.
Что такое элемент?
Элемент иногда называют тегом. Хотя эти два понятия часто используются как взаимозаменяемые, между ними есть небольшая разница. Тег ссылается на литерал <p> или </p>, который вы включаете в HTML-файл для разметки текстового содержимого. Элемент – это закулисный объект, представляющий размеченный текст. Считайте элемент аналогом DOM тегов HTML.
Как создать новый элемент с помощью jQuery
Как и большинство операций jQuery, создание элемента начинается с функции доллара, $ () . Это ярлык для основной функции jQuery () . Эта функция имеет три различные цели:
- Соответствует элементам, обычно уже существующим в документе.
- Создает новые элементы
- Запускает функцию обратного вызова, когда DOM готова
Когда вы передаете строку, содержащую HTML в качестве первого параметра, эта функция создаст новый элемент:
$("<a>")Это возвращает специальный объект jQuery, который содержит коллекцию элементов. В этом случае есть единственный объект, представляющий элемент «a», который мы только что создали.
Строка должна выглядеть как HTML, чтобы отличать это действие от совпадающих элементов. На практике это означает, что строка должна начинаться с < . Вы не можете добавить в документ простой текст с помощью этого метода.
Важно понимать, что это не добавляет элемент в ваш документ, а только создает новый элемент, готовый для добавления. Элемент «не прикреплен», он занимает память, но еще не является частью последней страницы.
Добавление более сложного HTML
Функция доллара фактически может создать более одного элемента. Фактически, он может построить любое дерево HTML-элементов по вашему желанию:
$("<ul><li>one</li><li>two</li><li>three</li></ul>")Вы также можете использовать этот формат для создания элемента с атрибутами:
$('<img src="photo.jpg" alt="my hometown" />')Как установить атрибуты для нового элемента
Вы можете создать новый элемент jQuery и установить его атрибуты без необходимости самостоятельно создавать полную HTML-строку. Это полезно, если вы динамически генерируете значения атрибутов. Например:
photo = new Date().getHours() > 12 ? "afternoon.jpg" : "morning.jpg";
$("<img>", { src: photo });Как добавить элемент
Создав новый элемент, вы можете добавить его в документ несколькими способами. В документации jQuery эти методы собраны вместе в категории «манипуляции» .
Добавить как дочерний элемент существующего элемента
$("body").append($("<p>Hello, world</p>"));
$(document.body).append($el);Вы можете использовать этот метод, например, чтобы добавить новый элемент списка в конец списка.
Добавить его как родственника существующего элемента
$("p.last").after("<p>A new paragraph</p>")
$("ul li:first").before("<li>new item</li>")Это хороший выбор, если, например, вы хотите добавить новый абзац между двумя другими.
Заменить существующий элемент
Вы можете заменить существующий элемент на вновь созданный, используя метод replaceWith () :
$('#old').replaceWith("<p>New paragraph</p>");Оберните существующий элемент
Это довольно редкий вариант использования, но вы можете заключить существующий элемент в новый. Например, у вас может быть элемент кода, который вы хотите обернуть в pre :
$('code#n1').wrap("<pre>")Доступ к созданному вами элементу
Функция $ () возвращает объект jQuery. Это полезно для последующих операций:
$el = $("p");
$('body').append($el);Обратите внимание, что по соглашению программисты jQuery часто называют переменные jQuery ведущим знаком доллара. Это просто схема именования и не имеет прямого отношения к функции $ () .
Создание элементов с помощью jQuery
Хотя вы можете управлять DOM с помощью встроенных функций JavaScript, jQuery значительно упрощает это. По-прежнему очень полезно хорошо разбираться в DOM, но jQuery делает работу с ним намного приятнее.