.html()
Возвращает: Строка
Описание: Получает содержимое HTML первого элемента из набора сответствующих элементов.
.html()
Добавлена в версию: 1.0
Этот метод недоступен на документы 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 иногда оставляет кавычки вокруг значений атрибутов, если они содержат только алфавитно-цифровые символы.
Примеры
Преобразует HTML в текст при нажатии ЛКМ.Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("p").click(function () { var htmlStr = $(this).html(); $(this).text(htmlStr); }); }); </script> <style> p { margin:8px; font-size:20px; color:blue; cursor:pointer; } b { text-decoration:underline; } button { cursor:pointer; } </style> </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> </body> </html>
.html( строкаHTML )
Возвращает: jQuery
Описание: Определяет содержание HTML каждого элемента в наборе соответствующих элементов.
.html( строкаHTML )
Добавлена в версию: 1.0
строкаHTML
Строка HTML для определения содержания каждого соответствующего элемента.
.html( function(индекс, старыйHTML) )
Добавлена в версию: 1.4
function(индекс, старыйHTML)
Функция, возвращающая содержание HTML для установки. Получает индекс положения элемента в наборе и старое значение HTML в качестве аргументов. jQuery опорожняет элемент перед вызовом функции; использует аргумент oldhtml для ссылки на предыдущее содержание.
Этот метод недоступен на документы XML.
Когда мы используем .html() для определения содержания элементов, любое содержание этих элементов будет полностью замененно новым содержанием. Рассмотрим следующий HTML:
<div class="demo-container"> <div class="demo-box">Demonstration Box</div> </div>
Мы можем установить содержание HTML <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>';
});
Получив документ с 6 параграфами, данный пример установит HTML <div class="demo-container"> в <p>All new content for <em>6 paragraphs!</em></p>.
Примеры
Пример 1
Добавляет HTML код к каждому элементу div.$("div").html("Hello Again");
Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("div").html("<span class='red'>Hello <b>Again</b></span>"); }); </script> <style> .red { color:red; } </style> </head> <body> <span>Hello</span> <div></div> <div></div> <div></div> </body> </html>
Пример 2
Добавляет HTML код к каждому элементу div, затем немедленно обрабатывает вставленный код.
$("div").html("Wow! Such excitement...");
$("div b").append(document.createTextNode("!!!"))
.css("color", "red");
Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("div").html("<b>Wow!</b> Such excitement..."); $("div b").append(document.createTextNode("!!!")) .css("color", "red"); }); </script> <style> div { color:blue; font-size:18px; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
Была ли эта информация полезной?
