html()

посл. ред. 12.08.2016

Метод html() изменяет HTML-код каждого элемента выборки или возвращает HTML-код первого элемента.

Варианты использования

jQ_object.html() => String: Возвращает HTML-код первого элемента выборки.
jQ_object.html(HTML-код) => jQuery: Заменяет HTML-код каждого элемента выборки на новый HTML-код.
jQ_object.html(DOM-элемент) => jQuery: Удаляет HTML-код каждого элемента выборки и вставляет на это место указанный DOM-элемент (элементы).
jQ_object.html(jQuery-объект) => jQuery: Удаляет HTML-код каждого элемента выборки и вставляет на это место элементы, представленные указанным jQuery-объектом.
jQ_object.html(функция) => jQuery: Заменяет HTML-код каждого элемента выборки на новое содержимое, возвращённое указанной функцией. Данная функция выполняется для каждого элемента выборки отдельно.
При запуске функции первым аргументом передаётся индекс элемента в выборке. Вторым аргументом передаётся текущее HTML-содержимое элемента. Ссылка на сам элемент хранится в переменной this.

Примеры

<html>
<head>
  <title>Работа с элементами DOM</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <p>Параграф</p>
  <p>Параграф</p>
  <p>Параграф</p>
</body>
</html>
 
<script>
$('p')
/* выбор всех параграфов */
  .html(function (index, content) {
    return '<b>' + (index + 1) + '.</b> ' + content;
  });
/* редактирование всех параграфов */
</script>

1. Параграф

2. Параграф

3. Параграф

<html>
<head>
  <title>Работа с элементами DOM</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <p>Параграф 1</p>
  <p>Параграф 2</p>
  <p>Параграф 3</p>
</body>
</html>
 
<script>
alert($('p').html());
/* выводит содержимое первого параграфа */
</script>