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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

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

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

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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

jQuery: основы

Изучите jQuery с нуля!

Смотреть

Метки:

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

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

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

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