Metoda html

Metoda html pozwala zmieniać tekst elementu i uzyskiwać go wraz z tagami.

Składnia

Uzyskiwanie tekstu:

javascript$(selektor).html();

Zmiana tekstu:

javascript$(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:

javascript$(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:

javascript$(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:

html<p id="test">text</p>

javascriptlet text = $('#test').html();
alert(text);

Przykład

Zmieńmy zawartość naszego akapitu:

html<p id="test">text1</p>

javascript$('#test').html('text2');

Kod HTML będzie wyglądać tak:

html<p id="test">text2</p>

Przykład

Zmieńmy zawartość naszego akapitu na tekst z tagami:

html<p id="test">text1</p>

javascript$('#test').html('<span>text2</span>');

Kod HTML będzie wyglądać tak:

html<p id="test"><span>text2</span></p>

Przykład

Dodajmy każdemu akapitowi na końcu jego kolejny numer w zestawie:

html<p>text</p>
<p>text</p>
<p>text</p>

javascript$('p').html(function(index, value){
  return value + ' ' + index;
});

Kod HTML będzie wyglądać tak:

html<p>text 0</p>
<p>text 1</p>
<p>text 2</p>

Zobacz też