jQuery метод .html()

Определение и применение

jQuery метод .html() задает содержимое выбранных элементов, или возвращает значение первого элемента в наборе.

Если метод используется, чтобы получить содержимое какого-либо элемента, то в этом случае, возвращается содержимое только первого элемента в наборе (независимо от количества подобных элементов, выбранных селектором).

Когда метод .html() используется для задания содержимого элемента, любое содержимое, которое было в этом элементе полностью заменяется новым содержанием. Кроме того, jQuery удаляет все содержимое и обработчики событий дочерних элементов перед заменой этих элементов новым содержимым.

Чтобы установить содержимое элемента <script>, который не содержит HTML, вы можете использовать jQuery метод .text(). Этот метод также используется, чтобы вернуть только содержимое элементов (без HTML тегов).

jQuery синтаксис:

Возвращение содержимого:

Синтаксис 1.0:

JavaScript
$(selector).html() // Этот метод не принимает аргументов (возвращает String)

Установка содержимого:

Синтаксис 1.0:

Код
$(selector).html( htmlString )
htmlString - новое содержимое (может содержать HTML теги)

Синтаксис 1.4:

Код
$(selector).html(function( index, currentHtmlString ))

где:

index - Integer

Код
currentHtmlString - текущее содержимое.

Добавлен в версии jQuery

1.0 (синтаксис обновлен в версии 1.4)

Значения параметров

Параметр Описание
htmlString Задает новое содержимое для выбранных элементов (может содержать HTML теги). Параметр является обязательным при установке нового содержимого.
function(index, currentHtmlString) Задает функцию, которая возвращает содержимое, которое будет установлено. Внутри функции this ссылается на текущий элемент в наборе.
  • index - возвращает индекс позиции элемента в наборе (среди выбранных элементов).
  • currentHtmlString - возвращает текущее содержимое выбранного элемента.

HTML и Trusted Types

В jQuery 4.0 операции вставки HTML поддерживают TrustedHTML. При CSP require-trusted-types-for 'script' создавайте разрешённое значение через политику приложения. jQuery не очищает HTML автоматически: для обычного пользовательского текста используйте .text().

Пример использования

Метод .html() — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html
HTML
<div class="main">
  <p>Простой абзац</p>
  <p>Не простой абзац</p>
  <p>Сложный абзац</p>
</div>
<div class="main">
  <p>Простой абзац</p>
  <p>Не простой абзац</p>
  <p>Сложный абзац</p>
</div>
main.js
JavaScript
$(document).ready(function () {
    console.log($('div').html()) // выводим в консоль браузера содержимое первого элемента <div> в наборе
})
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .html() мы выводим в консоль браузера содержимое первого элемента <div> в наборе.

Рассмотрим пример в котором с помощью метода .html() мы установим элементам новое содержимое.

Пример использования метода .html() (установка содержимого)

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html
HTML
<button>Клик</button>
<p>Простой абзац</p>
<p>Не простой абзац</p>
<p>Сложный абзац</p>
main.js
JavaScript
$(document).ready(function () {
    $('button').click(function () {
        $('p').html('А вот и <b>обычный абзац</b>')
    })
})
style.css
CSS

В этом примере с использованием jQuery метода .html() мы при клике на кнопку устанавливаем новое содержимое для всех элементов <p> в документе. Обратите внимание, что теги указанные в методе были обработаны браузером.

Рассмотрим пример в котором в качестве параметра метода .html() мы передадим функцию.

Пример использования функции в качестве параметра метода .html()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html
HTML
<button>Клик</button>
<p>Простой абзац</p>
<p>Не простой абзац</p>
<p>Сложный абзац</p>
main.js
JavaScript
$(document).ready(function () {
    $('button').click(function () {
        $('p').html(function (index, currentHtmlString) {
            var newHtmlString =
                'Старое содержимое элемента под индексом ' + index + ': <b>' + currentHtmlString + '</b>'
            return newHtmlString
        })
    })
})
style.css
CSS

В этом примере с использованием jQuery метода .text() и функции, переданной в качестве параметра метода, мы при нажатии на кнопку (элемент <button>) заменяем содержимое абзацев. Наша функция устанавливает новое содержимое элементов <p>, которое содержит индекс элемента и старое содержимое элемента (до изменения).