Methode html
Die Methode html ermöglicht es, den Text
eines Elements zu ändern und ihn zusammen mit Tags zu erhalten.
Syntax
Text abrufen:
$(Selektor).html();
Text ändern:
$(Selektor).html(neuer Text);
Zusätzlich
Die Methode html kann eine gegebene
Funktion auf jedes Element im Set anwenden.
Dabei erhält die Funktion als ersten Parameter
die Nummer des Elements im Set und als zweiten Parameter
- den aktuellen Text des Elements:
$(Selektor).html(function(Nummer im Set, aktueller Text des Elements));
Die Variablennamen in der Funktion können beliebig sein.
Wenn wir zum Beispiel für den ersten Parameter den Namen
index vergeben - dann ist innerhalb unserer Funktion die
Variable index verfügbar, in der die Nummer im
Set für dasjenige Element gespeichert ist, das die Funktion gerade
verarbeitet. Analog dazu: Wenn für den zweiten
Parameter zum Beispiel der Name value vergeben wird - dann
ist innerhalb unserer Funktion die Variable value verfügbar,
in der der Text desjenigen Elements gespeichert ist, das die Funktion
gerade verarbeitet:
$(Selektor).html(function(index, value) {
// hier sind die Variablen index und value verfügbar
});
Der Text jedes Elements ändert sich zu dem, den die Funktion konkret für dieses Element zurückgibt.
Beispiel
Lassen Sie uns den Inhalt unseres Absatzes ausgeben:
<p id="test">text</p>
let text = $('#test').html();
alert(text);
Beispiel
Lassen Sie uns den Inhalt unseres Absatzes ändern:
<p id="test">text1</p>
$('#test').html('text2');
Der HTML-Code sieht dann so aus:
<p id="test">text2</p>
Beispiel
Lassen Sie uns den Inhalt unseres Absatzes auf Text mit Tags ändern:
<p id="test">text1</p>
$('#test').html('<span>text2</span>');
Der HTML-Code sieht dann so aus:
<p id="test"><span>text2</span></p>
Beispiel
Lassen Sie uns jedem Absatz am Ende seine laufende Nummer im Set hinzufügen:
<p>text</p>
<p>text</p>
<p>text</p>
$('p').html(function(index, value){
return value + ' ' + index;
});
Der HTML-Code sieht dann so aus:
<p>text 1</p>
<p>text 2</p>
<p>text 3</p>
Siehe auch
-
Methode
text,
die es ermöglicht, den Text des Elements ohne Tags zu erhalten -
JavaScript-Eigenschaft
innerHTML,
mit der der Text eines Elements in reinem JavaScript geändert werden kann -
JavaScript-Eigenschaft
outerHTML,
mit der der Text eines Elements zusammen mit seinem Tag in reinem JavaScript geändert werden kann
