Methode html
De methode html maakt het mogelijk om de tekst
van een element te wijzigen en deze samen met de tags op te halen.
Syntaxis
Tekst ophalen:
$(selector).html();
Tekst wijzigen:
$(selector).html(nieuwe tekst);
Extra
De methode html kan een opgegeven
functie toepassen op elk element in de set.
Hierbij ontvangt de functie als eerste parameter
het nummer van het element in de set, en als tweede parameter
- de huidige tekst van het element:
$(selector).html(function(nummer in set, huidige tekst van element));
De namen van de variabelen in de functie kunnen willekeurig zijn.
Stel, we geven de eerste parameter de naam
index - dan is binnen onze functie de variabele
index beschikbaar, waarin het nummer in de
set zal zitten voor dat element dat de functie op dat moment
verwerkt. Op dezelfde manier, als we voor de tweede
parameter bijvoorbeeld de naam value geven - dan
is binnen onze functie de variabele value beschikbaar,
waarin de tekst zal zitten van dat element dat de functie
op dat moment verwerkt:
$(selector).html(function(index, value) {
// hier zijn de variabelen index en value beschikbaar
});
De tekst van elk element verandert in die, welke de functie specifiek voor dit element teruggeeft.
Voorbeeld
Laten we de inhoud van onze alinea weergeven:
<p id="test">tekst</p>
let text = $('#test').html();
alert(text);
Voorbeeld
Laten we de inhoud van onze alinea wijzigen:
<p id="test">tekst1</p>
$('#test').html('tekst2');
De HTML-code ziet er dan zo uit:
<p id="test">tekst2</p>
Voorbeeld
Laten we de inhoud van onze alinea wijzigen naar tekst met tags:
<p id="test">tekst1</p>
$('#test').html('<span>tekst2</span>');
De HTML-code ziet er dan zo uit:
<p id="test"><span>tekst2</span></p>
Voorbeeld
Laten we aan elke alinea zijn volgnummer in de set toevoegen aan het einde:
<p>tekst</p>
<p>tekst</p>
<p>tekst</p>
$('p').html(function(index, value){
return value + ' ' + index;
});
De HTML-code ziet er dan zo uit:
<p>tekst 0</p>
<p>tekst 1</p>
<p>tekst 2</p>
Zie ook
-
methode
text,
die het mogelijk maakt om de tekst van een element zonder tags op te halen -
JavaScript eigenschap
innerHTML,
waarmee je de tekst van een element kunt wijzigen in pure JavaScript -
JavaScript eigenschap
outerHTML,
waarmee je de tekst van een element samen met zijn tag kunt wijzigen in pure JavaScript
