Метод jQuery html()

Методы HTML/CSS jQuery

Метод html() jQuery возвращает или устанавливает содержимое выбранного элемента (innerHTML).

Использование метода html()Получитьпри получении содержимого, оно будет возвращать:Содержимое первого выбранного элементасодержимого.

Использование метода html()Установитьпри установке содержимого, оно будет заменять:Содержимое всех выбранных элементов.

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

Использованиеtext()Метод возвращает или устанавливает текстовый контент выбранного элемента.

Грамматика:

Получить содержимое:

$(selector).html()

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

$(selector).html(content)

Использование функции для установки содержимого:

$(selector).html(function(index,　currentContent))

Пример

Нажмите на кнопку, чтобы получить содержимое первого абзаца:

$("button").click(function(){
　　alert($("p").html());
});

Нажатие на каждый абзац вернёт HTML-содержимое:

$("p").click(function(){
　　alert($(this).html());
});

Изменение содержимого всех абзацев:

$("button").click(function(){
　　$("p").html("Я хочу сказать:　<b>Hello world</b>");
});

Использование функции для изменения содержимого элемента:

$("button").click(function(){
　　$("p").html(function(i){
　　　　return "Этот p элемент имеет индекс: " + i;
　　});
});

Разница между методами html() и text():

$("#btn1").click(function(){
　　$("p").html("Я хочу сказать:　<b>Hello world</b>");
});
$("#btn2").click(function(){
　　$("p").text("Я хочу сказать:　<b>Hello world</b>");
});

Значение параметра

Методы HTML/CSS jQuery