Справочник API
.html() в jQuery
Содержание статьи
-
Категории: Manipulation › DOM Insertion, Inside
Получает HTML содержимое первого элемента набора jQuery или замещает содержимое каждого элемента в наборе jQuery заданным фрагментом HTML разметки.
Синтаксис и описание:
Добавлено в jQuery 1.0.html( )
Добавлено в jQuery 1.0.html( htmlString )
Добавлено в jQuery 1.4.html( function( index, oldhtml ) )
Без аргументов .html() возвращает HTML-содержимое (
innerHTML) первого элемента набора в виде строки — работает только с одним элементом, даже если в наборе их несколько.С аргументом-строкой .html(htmlString) заменяет содержимое всех элементов набора на переданную разметку (прежнее содержимое корректно снимается — так же, как при .empty()).
С функцией .html(function(index, oldhtml)) новое содержимое вычисляется для каждого элемента отдельно: функция получает позицию элемента в наборе и его текущее HTML-содержимое, а должна вернуть новую HTML-строку.
Возвращаемое значение: (строка) без аргументов; (объект) Набор jQuery — при вызове-сеттере.
Параметры:
htmlString – (строка) HTML-разметка, которой заменяется содержимое элементов.
function( index, oldhtml ) – (функция) index — позиция элемента в наборе, oldhtml — его текущее HTML-содержимое; должна вернуть новую HTML-строку.
Примечание (XSS):
Нельзя передавать в .html() необработанные данные из недоверенных источников — значения из URL, куки, пользовательский ввод из форм. Такая строка может содержать исполняемый код (например, обработчик
onerrorв теге изображения) и привести к межсайтовому скриптингу. Для вывода пользовательского текста используйте .text() — он не интерпретирует разметку.Примечание:
С jQuery 3.5.0 внутренний
jQuery.htmlPrefilterбольше не приводит самозакрывающиеся теги вида<div/>к виду<div></div>— старое поведение убрали из соображений безопасности, поскольку само регулярное выражение было источником потенциальной XSS-уязвимости. Если код полагался на автозакрытие тегов вроде<p/>, браузер теперь интерпретирует их как незакрытые — пишите теги полностью, с явным закрывающим тегом.В jQuery 3.x и 4.0:
Метод работает без изменений в 3.7.1 и 4.0, а в jQuery 4.0 добавлена поддержка Trusted Types: если сайт использует CSP-директиву
require-trusted-types-for 'script', в .html() можно передавать значение типаTrustedHTML, не нарушая политику. Нативный аналог — свойствоelement.innerHTML(для чтения и записи), но без автоматической очистки jQuery-данных потомков и без поддержки функции-колбэка. Подробнее — в статье jQuery и обычный JavaScript.
Примеры:
Заменить содержимое блока статической разметкой.
$('#status').html('<strong>Готово</strong>');Прочитать текущее содержимое первого элемента набора.
var current = $('.card').first().html();Изменить содержимое на основе предыдущего значения.
$('.counter').html(function(index, oldHtml) { var n = parseInt(oldHtml, 10) || 0; return String(n + 1); });Небезопасно и безопасно — вывод пользовательского текста.
// НЕПРАВИЛЬНО: $('#comment').html(userInput); $('#comment').text(userInput); // текст экранируется автоматически