Метод html
Методът html позволява да променяте текста
на елемент и да го получавате заедно с таговете.
Синтаксис
Получаване на текст:
$(селектор).html();
Промяна на текст:
$(селектор).html(нов текст);
Допълнително
Методът html може да приложи зададена
функция към всеки елемент в набора.
При това първият параметър функцията получава
номера на елемента в набора, а вторият параметър
- текущия текст на елемента:
$(селектор).html(function(номер в набор, текущ текст на елемент));
Имената на променливите във функцията могат да бъдат всякакви.
Например, ако за първия параметър дадем име
index - тогава във нашата функция ще бъде достъпна
променливата index, в която ще се намира номерът в
набора за този елемент, който функцията обработва
в дадения момент.Аналогично, ако за втория
параметър дадем, например, име value - тогава
във нашата функция ще бъде достъпна променливата value,
в която ще се намира текстът на този елемент, който функцията
обработва в дадения момент:
$(селектор).html(function(index, value) {
// тук са достъпни променливите index и value
});
Текстът на всеки елемент ще се промени на този, който функцията върне конкретно за този елемент.
Пример
Нека изведем на екрана съдържанието на нашия параграф:
<p id="test">text</p>
let text = $('#test').html();
alert(text);
Пример
Нека променим съдържанието на нашия параграф:
<p id="test">text1</p>
$('#test').html('text2');
HTML кодът ще изглежда така:
<p id="test">text2</p>
Пример
Нека променим съдържанието на нашия параграф на текст с тагове:
<p id="test">text1</p>
$('#test').html('<span>text2</span>');
HTML кодът ще изглежда така:
<p id="test"><span>text2</span></p>
Пример
Нека на всеки параграф добавим в края неговия пореден номер в набора:
<p>text</p>
<p>text</p>
<p>text</p>
$('p').html(function(index, value){
return value + ' ' + index;
});
HTML кодът ще изглежда така:
<p>text 1</p>
<p>text 2</p>
<p>text 3</p>
Вижте също
-
метод
text,
който позволява да получите текста на елемента без тагове -
JavaScript свойство
innerHTML,
с помощта на което можете да промените текста на елемент на чист JavaScript -
JavaScript свойство
outerHTML,
с помощта на което можете да промените текста на елемент заедно с неговия таг на чист JavaScript
