html metódus

Az html metódus lehetővé teszi az elem szövegének módosítását és a szöveg lekérését a címkékkel együtt.

Szintaxis

Szöveg lekérése:

javascript$(selector).html();

Szöveg módosítása:

javascript$(selector).html(új szöveg);

További információ

Az html metódus alkalmazhat egy megadott funkciót a kiválasztott elemek mindegyikére. Ebben az esetben a funkció első paramétere az elem sorszáma a halmazban, a második paramétere pedig az elem aktuális szövege:

javascript$(selector).html(function(sorszám a halmazban, az elem aktuális szövege));

A változók nevei a funkcióban tetszőlegesek lehetnek. Például, ha az első paraméternek az index nevet adjuk, akkor a funkciónk belsejében elérhető lesz az index változó, amely tartalmazni fogja annak az elemnek a sorszámát a halmazban, amelyet a funkció éppen feldolgoz. Hasonlóképpen, ha a második paraméternek például az value nevet adjuk, akkor a funkciónk belsejében elérhető lesz az value változó, amely tartalmazni fogja annak az elemnek a szövegét, amelyet a funkció éppen feldolgoz:

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

  // itt elérhetők az index és value változók
  
});

Minden egyes elem szövege azon szövegre változik, amelyet a funkció ad vissza az adott elemre.

Példa

Jelenítsük meg a bekezdésünk tartalmát:

html<p id="test">szöveg</p>

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

Példa

Változtassuk meg a bekezdésünk tartalmát:

html<p id="test">szöveg1</p>

javascript$('#test').html('szöveg2');

A HTML kód így fog kinézni:

html<p id="test">szöveg2</p>

Példa

Változtassuk meg a bekezdésünk tartalmát címkékkel ellátott szövegre:

html<p id="test">szöveg1</p>

javascript$('#test').html('<span>szöveg2</span>');

A HTML kód így fog kinézni:

html<p id="test"><span>szöveg2</span></p>

Példa

Adjunk hozzá minden bekezdés végéhez a sorszámát a halmazban:

html<p>szöveg</p>
<p>szöveg</p>
<p>szöveg</p>

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

A HTML kód így fog kinézni:

html<p>szöveg 0</p>
<p>szöveg 1</p>
<p>szöveg 2</p>

Lásd még