.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() для получения содержимого элемента. Если под селектор попадут несколько элементов, то будет извлечён только первый:

$('div.demo-container').html();

Данные будут извлечены из первого <div> с искомым классом class="demo-container":

<div class="demo-container">
 <div class="demo-box">Demonstration Box</div>
 </div>

Результат будет такой:

<div class="demo-box">Demonstration Box</div>

Данный метод использует нативное свойство innerHTML. Некоторые браузеры могут возвратить результат не совсем в таком виде, в котором он присутствует на странице. К примеру, Internet Explorer иногда упускает кавычки у значений атрибутов.

Пример:

Преобразуем html в текст, при клике по параграфу.

<!DOCTYPE html>
<html>
<head>
 <style>
 p { margin:8px; font-size:20px; color:blue;
     cursor:pointer; }
 b { text-decoration:underline; }
 button { cursor:pointer; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <p>
   <b>Click</b> to change the <span id="tag">html</span>
 </p>
 <p>
   to a <span id="text">text</span> node.
 </p>
 <p>
   This <button name="nada">button</button> does nothing.
 </p>
<script>
$("p").click(function () {
 var htmlStr = $(this).html();
 $(this).text(htmlStr);
});
</script>
</body>
</html>

Демо:

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

Возьмём следующий HTML фрагмент:

<div class="demo-container">
 <div class="demo-box">Demonstration Box</div>
</div>

Контент элемента <div class="demo-container"> может быть задан следующим образом:

$('div.demo-container')
 .html('<p>All new content. <em>You bet!</em></p>');

Данная строчка заменит содержимое элемента <div class="demo-container">:

<div class="demo-container">
 <p>All new content. <em>You bet!</em></p>
</div>

Начиная с jQuery 1.4, метод .html() позволяет формировать HTML контент элемента в отдельной функции.

$('div.demo-container').html(function() {
 var emph = '<em>' + $('p').length + ' paragraphs!</em>';
 return '<p>All new content for ' + emph + '</p>';
});

Дан документ с шестью параграфами. Заменим их содержимое с <div class="demo-container"> на <p>All new content for <em>6 paragraphs!</em></p>.

Примеры

Пример: добавляем html каждому из div-ов

<!DOCTYPE html>
<html>
<head>
 <style>
 .red { color:red; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <span>Hello</span>
 <div></div>
 <div></div>
 <div></div>
<script>$("div").html("<span class='red'>Hello <b>Again</b></span>");</script>
</body>
</html>

Демо:

Пример: добавляем html каждому из <div>, а затем сразу же дополняем его содержимое.

<!DOCTYPE html>
<html>
<head>
 <style>
 div { color:blue; font-size:18px; }
 </style>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
 <div></div>
 <div></div>
 <div></div>
<script>
   $("div").html("<b>Wow!</b> Such excitement...");
   $("div b").append(document.createTextNode("!!!"))
             .css("color", "red");
</script>
</body>
</html>

Демо:

Связанные уроки:

  • 15 особенностей jQuery 1.4

    jQuery постоянно развивается. Релиз версии 1.4 состоялся в январе. jQuery 1.4 получила много новых функций, расширений и имеет значительно лучшую производительность. Данная статья посвящена описанию основных улучшений jQuery 1.4.

  • Доступ к элементам контента с помощью jQuery

    jQuery даёт возможность работать с элементами HTML и их содержимым различными способами. Например, вы можете добавить новые элементы внутрь, вокруг, до и после существующих элементов; вы можете заменить один элемент другим (или другими); вы можете читать и заменять содержимое элементов.

^ Наверх ^