Содержание
- Материал из JQuery
- Примеры
- version added: 1.0 .html()
- version added: 1.0 .html( htmlString )
- version added: 1.4 .html( function(index, oldhtml) )
- Пример:
- Примеры
- Связанные уроки:
- 15 особенностей jQuery 1.4
- Доступ к элементам контента с помощью jQuery
Материал из JQuery
Примеры
Допустим страница содержит следующий текст:
следующие два выражения будут равнозначны
в обоих случаях элемент списка с текстом «Тест» будет добавлен в конец элементов с классом list. В результате, текст нашей страницы станет следующим:
Помимо html-текста, можно вставлять jQuery объекты. При этом, вставляемые элементы будут не скопированы, а перемещены. Например следующий код
переместит элемент li из первого списка, в конец второго:
Рассмотрим пример с использованием пользовательской функции. Добавим новый элемент списка только в список, который содержит элемент со словом «Быстрее»:
в итоге, текст первоначальной страницы станет следующим:
Для того чтобы вставить html-код в элемент нам поможет функция html(). Для того чтобы вставить элементы в тег div нужно сделать блок состоящий из кода.
Теперь нужно вставить блок кода в элемент при помощи httml().
Посмотрите на итог. В тег div помещены 4 строки.
Вы можете очистить тег div от кода передав пустоту в функцию html(»). Также вы можете использовать функцию empty(). Подробнее о функции empty и remove читайте на странице как очистить удалить элементы jQuery. В неё не нужно передавать никаких входных параметров.
Если не передавать в функцию html() входной параметр, то вы можете использовать эту функцию для копирования данных. Обратите внимание на то, что HTML код копируется вместе с тегами.
Возвращает или изменяет html-содержимое выбранных элементов
version added: 1.0 .html()
Получает HTML-содержимое первого элемента в наборе.
version added: 1.0 .html( htmlString )
htmlString
Тип: строка html
HTML строка которую нужно вставить в элемент.
version added: 1.4 .html( function(index, oldhtml) )
function(index, oldhtml)
Заменяет html-содержимое каждого выбранного элемента в наборе на возвращенное функцией function значение. Функция вызывается, для каждого из выбранных элементов.
Данный метод нельзя применять к XML документам.
Мы можем использовать метод .html() для получения содержимого элемента. Если под селектор попадут несколько элементов, то будет извлечён только первый:
Данные будут извлечены из первого
Результат будет такой:
Данный метод использует нативное свойство innerHTML. Некоторые браузеры могут возвратить результат не совсем в таком виде, в котором он присутствует на странице. К примеру, Internet Explorer иногда упускает кавычки у значений атрибутов.
Пример:
Преобразуем html в текст, при клике по параграфу.
Метод .html() может использоваться так же для замещения содержимого элемента.
Возьмём следующий HTML фрагмент:
Данная строчка заменит содержимое элемента
Начиная с jQuery 1.4, метод .html() позволяет формировать HTML контент элемента в отдельной функции.
Дан документ с шестью параграфами. Заменим их содержимое с
All new content for 6 paragraphs!
Примеры
Пример: добавляем html каждому из div-ов
Пример: добавляем html каждому из
Связанные уроки:
15 особенностей jQuery 1.4
jQuery постоянно развивается. Релиз версии 1.4 состоялся в январе. jQuery 1.4 получила много новых функций, расширений и имеет значительно лучшую производительность. Данная статья посвящена описанию основных улучшений jQuery 1.4.
Доступ к элементам контента с помощью jQuery
jQuery даёт возможность работать с элементами HTML и их содержимым различными способами. Например, вы можете добавить новые элементы внутрь, вокруг, до и после существующих элементов; вы можете заменить один элемент другим (или другими); вы можете читать и заменять содержимое элементов.
Источник: