html әдісі
html әдісі элементтің мәтінін өзгертуге
және оны тегтермен бірге алуға мүмкіндік береді.
Синтаксис
Мәтінді алу:
$(селектор).html();
Мәтінді өзгерту:
$(селектор).html(жаңа мәтін);
Қосымша
html әдісі берілген функцияны жиынның әрбір элементіне қолдануы мүмкін.
Бұл ретте функция бірінші параметр ретінде жиындағы элементтің нөмірін алады, ал екінші параметр ретінде
- элементтің ағымдағы мәтінін алады:
$(селектор).html(function(жиындағы нөмір, элементтің ағымдағы мәтіні));
Функциядағы айнымалы атаулары кез келген болуы мүмкін.
Мысалы, егер бірінші параметр үшін біз
index атауын берсек - онда біздің функция ішінде
index айнымалысы қол жетімді болады, онда функцияның осы уақытта өңдеп жатқан
элементінің жиындағы нөмірі болады.Сол сияқты, егер екінші
параметр үшін, мысалы, value атауын берсек - онда
біздің функция ішінде value айнымалысы қол жетімді болады,
онда функцияның осы уақытта өңдеп жатқан элементінің мәтіні болады:
$(селектор).html(function(index, value) {
// мұнда index және value айнымалылары қолжетімді
});
Әрбір элементтің мәтіні сол элемент үшін функция қайтарған мәнге ауыстырылады.
Мысал
Біздің абзац мазмұнын экранға шығарайық:
<p id="test">мәтін</p>
let text = $('#test').html();
alert(text);
Мысал
Біздің абзац мазмұнын өзгертейік:
<p id="test">мәтін1</p>
$('#test').html('мәтін2');
HTML коды мынадай болады:
<p id="test">мәтін2</p>
Мысал
Біздің абзац мазмұнын тегтері бар мәтінге өзгертейік:
<p id="test">мәтін1</p>
$('#test').html('<span>мәтін2</span>');
HTML коды мынадай болады:
<p id="test"><span>мәтін2</span></p>
Мысал
Әрбір абзацқа оның жиындағы реттік нөмірін соңына қосамыз:
<p>мәтін</p>
<p>мәтін</p>
<p>мәтін</p>
$('p').html(function(index, value){
return value + ' ' + index;
});
HTML коды мынадай болады:
<p>мәтін 0</p>
<p>мәтін 1</p>
<p>мәтін 2</p>
