Манипуляция с элементами в jQuery. Часть 1

Манипуляция с элементами в jQuery

От автора: приветствую вас, друзья. В этой статье мы начнем знакомиться с методами, позволяющими осуществлять манипуляции с элементами DOM, а именно: добавление, удаление и изменение элементов DOM.

Для практической работы нам потребуется несколько элементов верстки, к примеру такой:

Первые два метода, о которых мы узнаем, будут методы html и text. Первый, метод html, позволяет получить или изменить HTML код выбранного элемента. Второй, метод text, возвращает или изменяет текст выбранного элемента. Давайте поэкспериментируем с ними.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Например, получим весь html-код блока content:

Манипуляция с элементами в jQuery

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

Манипуляция с элементами в jQuery

По аналогичной схеме работает и метод text. Используя его без параметра, мы получим текстовое содержимое элемента. Передавая параметром строку текста, мы заменим текст внутри элемента. Давайте получим все текстовое содержимое блока content:

Манипуляция с элементами в jQuery

А теперь попробуем заменить текст в элементах списка:

Манипуляция с элементами в jQuery

Пока все просто. Методы html и text на самом деле используются достаточно нечасто при манипуляции элементами, поскольку работают достаточно глобально. Например, используя метод html достаточно сложно добавить в конкретный элемент дочерний элемент, не удалив при этом уже существующие. Для этих целей куда проще использовать другие методы jQuery для манипуляции DOM, с которыми мы и познакомимся уже в следующих статьях.

На этом текущая статья завершена. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree