.html()Возвращает: String
Описание: Получение HTML-содержимого первого элемента в наборе сопоставленных элементов.
Этот метод недоступен для XML-документов.
В HTML-документе .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. Некоторые браузеры могут не возвращать HTML, который точно воспроизводит исходный HTML в исходном документе. Например, Internet Explorer иногда опускает кавычки вокруг значений атрибутов, если они содержат только буквенно-цифровые символы.
Дополнительные заметки:
- По своему дизайну, любой конструктор jQuery или метод, принимающий строку HTML — jQuery(), .append(), .after() и т. д. — потенциально могут выполнять код. Это может произойти из-за инъекции тегов script или использования HTML-атрибутов, которые выполняют код (например,
<img onload="">). Не используйте эти методы для вставки строк, полученных из ненадежных источников, таких как параметры запроса URL, cookie или данные форм. Это может привести к уязвимостям типа межсайтового скриптинга (XSS). Удаляйте или экранируйте любые пользовательские данные перед добавлением содержимого в документ.
Пример:
Нажмите на абзац, чтобы преобразовать его из html в текст.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html demo</title>
<style>
p {
margin: 8px;
font-size: 20px;
color: blue;
cursor: pointer;
}
b {
text-decoration: underline;
}
button {
cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.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" ).on( "click", function() {
var htmlString = $( this ).html();
$( this ).text( htmlString );
});
</script>
</body>
</html> Демо:
.html( htmlString )Возвращает: jQuery
Описание: Установка HTML-содержимого каждого элемента в наборе сопоставленных элементов.
-
версия добавлена: 1.0.html( htmlString )
- htmlStringТип: htmlStringСтрока HTML, которая должна быть установлена в качестве содержимого каждого сопоставленного элемента.
-
-
версия добавлена: 1.4.html( function )
- functionФункция, возвращающая HTML-содержимое для установки. Получает индекс элемента в наборе и старое значение HTML в качестве аргументов. jQuery очищает элемент перед вызовом функции; используйте аргумент oldhtml для ссылки на предыдущее содержимое. Внутри функции
thisотносится к текущему элементу в наборе.
-
Метод .html() недоступен в XML-документах.
Когда .html() используется для установки содержимого элемента, любое предыдущее содержимое полностью заменяется новым. Кроме того, jQuery удаляет другие конструкции, такие как данные и обработчики событий, из дочерних элементов перед заменой этих элементов новым содержимым.
Рассмотрим следующий 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 emphasis = "<em>" + $( "p" ).length + " paragraphs!</em>";
return "<p>All new content for " + emphasis + "</p>";
}); Для документа с шестью абзацами этот пример установит HTML <div class="demo-container"> в <p>All new content for <em>6 paragraphs!</em></p>.
Этот метод использует свойство браузера innerHTML. Некоторые браузеры могут не генерировать DOM, который точно воспроизводит предоставленный исходный HTML. Например, Internet Explorer до версии 8 преобразует все атрибуты href ссылок в абсолютные URL, а Internet Explorer до версии 9 не будет правильно обрабатывать HTML5-элементы без добавления отдельного слоя совместимости.
Для установки содержимого элемента <script>, который не содержит HTML, используйте метод .text(), а не .html().
Примечание: В Internet Explorer до версии 9 включительно установка текстового содержимого HTML-элемента может повредить текстовые узлы его дочерних элементов, которые удаляются из документа в результате операции. Если вы сохраняете ссылки на эти DOM-элементы и хотите, чтобы они остались неизменными, используйте .empty().html( string ) вместо .html(string), чтобы элементы были удалены из документа до присвоения новой строки элементу.
Примеры:
Добавить немного html в каждый div.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html demo</title>
<style>
.red {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.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, а затем немедленно выполнить дополнительные манипуляции с вставленным html.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html demo</title>
<style>
div {
color: blue;
font-size: 18px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.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> 
