Узнайте, как создать элемент в jQuery

Узнайте, как создать элемент в jQuery

Создание нового элемента - одна из самых основных задач, которую вы можете решить с помощью библиотеки jQuery JavaScript. При использовании jQuery задача намного проще, чем эквивалентный подход с объектной моделью документа (DOM). Чем больше вы будете использовать jQuery, тем он станет более гибким и выразительным.





Для достижения определенной цели вам потребуется добавить свой элемент на веб-страницу. Узнайте, как добавить новый элемент списка или заменить абзац новым содержимым с помощью jQuery.



Что такое jQuery?

Библиотека jQuery представляет собой набор JavaScript код с двумя основными целями:





  • Он упрощает общие операции JavaScript.
  • Он решает проблемы перекрестной совместимости JavaScript между различными браузерами.

Вторая цель направлена ​​на устранение ошибок, но также устраняет различия в реализации между браузерами. Обе цели менее необходимы, чем раньше, поскольку браузеры со временем улучшаются. Но jQuery по-прежнему может быть ценным инструментом.

Что такое элемент?

Элемент иногда называют тегом. Хотя эти два понятия часто используются как синонимы, между ними есть небольшая разница. Тег относится к буквальному

или



вы включаете в HTML-файл для разметки текстового содержимого. Элемент - это закулисный объект, представляющий размеченный текст. Думайте об элементе как о аналоге DOM тегов HTML.

Как создать новый элемент с помощью jQuery

Как и большинство операций jQuery, создание элемента начинается с функции доллара, $ () . Это ярлык к ядру jQuery () функция. Эта функция имеет три различные цели:



  • Соответствует элементам, обычно уже существующим в документе.
  • Создает новые элементы
  • Запускает функцию обратного вызова, когда DOM готова

Когда вы передаете строку, содержащую HTML в качестве первого параметра, эта функция создаст новый элемент:

$(' ')

Это возвращает специальный объект jQuery, который содержит коллекцию элементов. В этом случае есть единственный объект, представляющий только что созданный элемент 'a'.



сделать Windows 10 быстрее для игр

Строка должна выглядеть как HTML, чтобы отличать это действие от совпадающих элементов. На практике это означает, что строка должна начинаться с символа < . Вы не можете добавить в документ простой текст с помощью этого метода.

Важно понимать, что это не добавляет элемент в ваш документ, а только создает новый элемент, готовый для добавления. Элемент «не прикреплен», он занимает память, но еще не является частью последней страницы.

Добавление более сложного HTML

Функция доллара фактически может создать более одного элемента. Фактически, он может построить любое дерево HTML-элементов по вашему желанию:

$('
  • one
  • two
  • three
')

Вы также можете использовать этот формат для создания элемента с атрибутами:

$(' my hometown')

Как установить атрибуты для нового элемента

Вы можете создать новый элемент jQuery и установить его атрибуты без необходимости самостоятельно создавать полную HTML-строку. Это полезно, если вы динамически генерируете значения атрибутов. Например:

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';
$(' ', { src: photo });

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

Создав новый элемент, вы можете добавить его в документ несколькими способами. В документации jQuery эти методы собраны вместе под Категория «манипуляции» .

Добавить как дочерний элемент существующего элемента

$('body').append($('

Hello, world

'));
$(document.body).append($el);

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

Добавить его как родственника существующего элемента

$('p.last').after('

A new paragraph

')
$('ul li:first').before('
  • new item
    • ')

    Это хороший выбор, если, например, вы хотите добавить новый абзац между двумя другими.

    Заменить существующий элемент

    Вы можете заменить существующий элемент на вновь созданный, используя заменить() метод:

    $('#old').replaceWith('

    New paragraph

    ');

    Оберните существующий элемент

    Это довольно редкий вариант использования, но вы можете заключить существующий элемент в новый. Например, у вас может быть код элемент, который вы хотите обернуть в для :

    $('code#n1').wrap('
    ')
    Доступ к созданному вами элементу
     
    В $ () функция возвращает объект jQuery. Это полезно для последующих операций:
    $el = $('p');  
    $('body').append($el);
    Обратите внимание, что по соглашению программисты jQuery часто называют переменные jQuery ведущим знаком доллара. Это просто схема именования и не имеет прямого отношения к $ () функция.
     
    Создание элементов с помощью jQuery
     
    Хотя вы можете управлять DOM с помощью встроенных функций JavaScript, jQuery значительно упрощает это. По-прежнему очень полезно хорошо разбираться в DOM, но jQuery делает работу с ним намного приятнее.
      Делиться    Делиться      Твитнуть      Эл. адрес      Скрытый герой веб-сайтов: понимание DOM  
    Изучаете веб-дизайн и хотите узнать больше об объектной модели документа? Вот что вам нужно знать о модели DOM.
    Читать далее       Похожие темы  
       
    • Программирование
      •  
    • Веб-разработка
      •  
    • jQuery
      •  
      Об авторе   Бобби Джек(Опубликовано 58 статей)      
    Бобби - энтузиаст технологий, проработавший разработчиком программного обеспечения большую часть двух десятилетий. Он увлечен играми, работает редактором обзоров в Switch Player Magazine и занимается всеми аспектами онлайн-публикации и веб-разработки.
    Ещё от Bobby Jack
    Подписывайтесь на нашу новостную рассылку
     
    Подпишитесь на нашу рассылку технических советов, обзоров, бесплатных электронных книг и эксклюзивных предложений!
    Нажмите здесь, чтобы подписаться