Metoda html

Metoda html omogoča spreminjanje besedila elementa in pridobivanje le-tega skupaj z oznakami.

Sintaksa

Pridobivanje besedila:

javascript$(selektor).html();

Spreminjanje besedila:

javascript$(selektor).html(novo besedilo);

Dodatno

Metoda html lahko uporabi določeno funkcijo za vsak element v nizu. Pri tem bo funkcija kot prvi parameter prejela zaporedno številko elementa v nizu, kot drugi parameter pa trenutno besedilo elementa:

javascript$(selektor).html(function(zaporedna številka v nizu, trenutno besedilo elementa));

Imena spremenljivk v funkciji so lahko poljubna. Na primer, če prvemu parametru damo ime index - bo znotraj naše funkcije na voljo spremenljivka index, v kateri bo zaporedna številka v nizu za tisti element, ki ga funkcija obdeluje v tem trenutku. Podobno, če drugemu parametru damo na primer ime value - bo znotraj naše funkcije na voljo spremenljivka value, v kateri bo besedilo tistega elementa, ki ga funkcija obdeluje v tem trenutku:

javascript$(selektor).html(function(index, value) {

  // tukaj so na voljo spremenljivki index in value
  
});

Besedilo vsakega elementa se bo spremenilo v tisto, ki ga bo funkcija vrnila posebej za ta element.

Primer

Izpišimo vsebino našega odstavka:

html<p id="test">besedilo</p>
javascriptlet text = $('#test').html();
alert(text);

Primer

Spremenimo vsebino našega odstavka:

html<p id="test">besedilo1</p>
javascript$('#test').html('besedilo2');

HTML koda bo po tem videti takole:

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

Primer

Spremenimo vsebino našega odstavka v besedilo z oznakami:

html<p id="test">besedilo1</p>
javascript$('#test').html('<span>besedilo2</span>');

HTML koda bo po tem videti takole:

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

Primer

Dodajmo vsakemu odstavku na konec njegovo zaporedno številko v nizu:

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

HTML koda bo po tem videti takole:

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

Glej tudi

  • metoda text,
    ki omogoča pridobivanje besedila elementa brez oznak
  • JavaScript lastnost innerHTML,
    s katero lahko zamenjamo besedilo elementa v čistem JavaScriptu
  • JavaScript lastnost outerHTML,
    s katero lahko spremenimo besedilo elementa skupaj z njegovo oznako v čistem JavaScriptu