Metoda html
Metoda html pozwala zmieniać tekst
elementu i uzyskiwać go wraz z tagami.
Składnia
Uzyskiwanie tekstu:
$(selektor).html();
Zmiana tekstu:
$(selektor).html(nowy tekst);
Dodatkowo
Metoda html może zastosować zadaną
funkcję do każdego elementu w zestawie.
Przy tym pierwszym parametrem funkcja otrzyma
numer elementu w zestawie, a drugim parametrem
- bieżący tekst elementu:
$(selektor).html(function(numer w zestawie, bieżący tekst elementu));
Nazwy zmiennych w funkcji mogą być dowolne.
Na przykład, jeśli dla pierwszego parametru nadamy nazwę
index - wtedy wewnątrz naszej funkcji będzie dostępna
zmienna index, w której będzie leżał numer w
zestawie dla tego elementu, który funkcja przetwarza
w danym momencie czasu. Analogicznie, jeśli dla drugiego
parametru nadać, na przykład, nazwę value - wtedy
wewnątrz naszej funkcji będzie dostępna zmienna value,
w której będzie leżał tekst tego elementu, który funkcja
przetwarza w danym momencie czasu:
$(selektor).html(function(index, value) {
// tutaj dostępne zmienne index i value
});
Tekst każdego elementu zmieni się na ten, który zwróci funkcja konkretnie dla tego elementu.
Przykład
Wyświetlmy na ekranie zawartość naszego akapitu:
<p id="test">text</p>
let text = $('#test').html();
alert(text);
Przykład
Zmieńmy zawartość naszego akapitu:
<p id="test">text1</p>
$('#test').html('text2');
Kod HTML będzie wyglądać tak:
<p id="test">text2</p>
Przykład
Zmieńmy zawartość naszego akapitu na tekst z tagami:
<p id="test">text1</p>
$('#test').html('<span>text2</span>');
Kod HTML będzie wyglądać tak:
<p id="test"><span>text2</span></p>
Przykład
Dodajmy każdemu akapitowi na końcu jego kolejny numer w zestawie:
<p>text</p>
<p>text</p>
<p>text</p>
$('p').html(function(index, value){
return value + ' ' + index;
});
Kod HTML będzie wyglądać tak:
<p>text 0</p>
<p>text 1</p>
<p>text 2</p>
