html-metoden
Metoden html giver mulighed for at ændre tekst
element og få det sammen med tags.
Syntaks
Hentning af tekst:
$(selector).html();
Ændring af tekst:
$(selector).html(ny tekst);
Yderligere
Metoden html kan anvende en given
funktion til hvert element i sættet.
I dette tilfælde vil funktionen modtage
elementets nummer i sættet som den første parameter, og den anden parameter
- elementets nuværende tekst:
$(selector).html(function(nummer i sættet, nuværende tekstelement));
Variabelnavnene i funktionen kan være vilkårlige.
For eksempel, hvis vi giver det første parameter navnet
index - så vil der i vores funktion være tilgængelig
variablen index, som vil indeholde nummeret i
sættet for det element, som funktionen behandler
på nuværende tidspunkt. Tilsvarende, hvis for det andet
parameter vi giver for eksempel navnet value - så
vil der i vores funktion være tilgængelig variablen value,
som vil indeholde teksten for det element, som funktionen
behandler på nuværende tidspunkt:
$(selector).html(function(index, value) {
// her er variablerne index og value tilgængelige
});
Teksten for hvert element vil blive ændret til den, som funktionen returnerer specifikt for dette element.
Eksempel
Lad os vise indholdet af vores afsnit på skærmen:
<p id="test">text</p>
let text = $('#test').html();
alert(text);
Eksempel
Lad os ændre indholdet af vores afsnit:
<p id="test">text1</p>
$('#test').html('text2');
HTML-koden vil se sådan ud:
<p id="test">text2</p>
Eksempel
Lad os ændre indholdet af vores afsnit til tekst med tags:
<p id="test">text1</p>
$('#test').html('<span>text2</span>');
HTML-koden vil se sådan ud:
<p id="test"><span>text2</span></p>
Eksempel
Lad os tilføje dens rækkenummer i sættet til slutningen af hvert afsnit:
<p>text</p>
<p>text</p>
<p>text</p>
$('p').html(function(index, value){
return value + ' ' + index;
});
HTML-koden vil se sådan ud:
<p>text 1</p>
<p>text 2</p>
<p>text 3</p>