Javascript-HTML-Methode

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

jQuery bietet viele Methoden, mit denen Entwickler effizient ein dynamisches Weberlebnis erstellen können. Die jQuery-Methode html() ersetzt den gesamten HTML-Code innerhalb des ausgewählten Elements. Dies ist nutzlich, wenn Sie dynamisch ändern möchten, was der Benutzer nach der Interaktion mit der Seite sieht.

In dieser Anleitung erfahren Sie, wie Sie html() . verwenden und seine Syntax. Wir werden uns auch einen schrittweisen Ansatz zur Verwendung von html() ansehen. jQuery html() ist eine grundlegende Methode in der jQuery-Bibliothek und wird häufig verwendet. Nachdem Sie die Grundlagen gelernt haben, können Sie mit dem Üben mit html() beginnen.

Was ist jQuery html()?

jQuery html () setzt den HTML-Inhalt jedes Elements in einem Satz ubereinstimmender Elemente. Es sollte darauf geachtet werden, eine ausreichend spezifische Abfrage bereitzustellen, um nur den gewunschten HTML-Code zu ersetzen.

Nur der Inhalt wird mit html() geändert. Wenn ein Stylesheet vorhanden ist, wird der neue Inhalt genauso gestaltet wie der vorherige Inhalt. Es ist auch erwähnenswert, dass html() nur bei einem HTML-Dokument funktioniert – es funktioniert nicht mit XML.

html() jQuery-Syntax

Erinnern Sie sich daran, dass jQuery-Methoden zuerst auf einem Selektor aufgerufen werden. Der Selektor kann so breit sein wie ein

Tag oder so spezifisch wie ein ). Sobald das gewunschte Element ausgewählt ist, können wir html() aufrufen und einen HTML-String als Parameter an html() ubergeben. Eine ausfuhrliche Erläuterung zu CSS-Selektoren finden Sie in unserem Leitfaden.

html() akzeptiert entweder ein String-Literal als Parameter oder eine Variable, die den String enth√§lt. Das √úbergeben eines Zeichenfolgenliterals von "Neuer Inhalt‚" wird dasselbe wie die √úbergabe einer Variablen darstellen, die auf "Neuer Inhalt‚"

Angenommen, wir haben dieses einfache

Wir können die gesamtes

-Tag:

Der obige Code rendert den neuen HTML-Code als:

Hätte es ein Styling gegeben, das mit dem ursprunglichen

Tag, wäre es mit dem neuen Inhalt nicht mehr aktiv. Es ist auch möglich, einen einfachen String zu ubergeben:

Unser HTML sieht jetzt wie folgt aus:

Wir sehen, dass es einige Unterschiede bei den neuen Inhalten gibt. Das Übergeben eines Zeichenfolgenliterals ist eine großartige Möglichkeit, den Stil des vorherigen Inhalts beizubehalten. Denken Sie daran, dass ein String-Literal einfach ein String ist, der Zeichen enthält. Wenn der neue Inhalt ein untergeordnetes Element sein muss, wird dies durch die Verwendung eines HTML-Strings erreicht.

Nun, da die grundlegende Syntax behandelt wurde, sehen wir uns ein Beispiel an. < /p>

html() jQuery-Beispiel

Wir haben gesehen, wie html() den Inhalt innerhalb des ausgew√§hlten Elements in unserem obigen "Neuer Inhalt‚" Beispiel. Dies kann erreicht werden, indem ein String-Literal oder ein HTML-String als Parameter ubergeben wird. Schauen wir uns ein Beispiel an, in dem wir das ursprungliche Design beibehalten.

Auf unserer HTML-Startseite sehen wir nur das Wort "Hallo‚" wird mit der Farbe Blau gestaltet.

In diesem Beispiel m√∂chten wir das Wort "Hallo‚" mit neuem Inhalt, behalten aber das ursprungliche Design bei. Dazu markieren wir den Absatz mit dem Klassennamen blau.

Wir haben den zur Klasse blue geh√∂renden Absatz ausgew√§hlt und "Hallo‚" mit ‚ÄûHallo WIEDER‚" Da html() den in die Elementnamen eingeschlossenen Inhalt ersetzt, bleibt die blaue Farbe erhalten.

A83aaFCGA71IBKWgL4WyaFqn GeP4fN7kwWBtZnN4Xmhk9dfSP85teVs83FA2w8myG0SsPwzmfMP8RagLyBGr0JCb8XgEpQ88AFUpD 5iatEp Im3xzfqRKD35rOb9xjhLoN1Na

Was ist, wenn wir den gesamten Absatztext ersetzen möchten? Wenn wir das Element

ausw√§hlen, wird der obige Text durch drei Instanzen von "Hallo WIEDER‚" ersetzt.

Hier wir w√§hlen alle Absatz-Tags in der HTML-Datei aus und ersetzen den Inhalt jedes einzelnen durch "Hallo WIEDER‚". Wie in unserem ersten Beispiel wird das ursprungliche Styling gerendert, weil wir re Platzieren Inhalt in diesen Tags gewickelt.

2guefy2uVdRQb3zbHpmF0SeFtMBttoqGZfEwZJn0nS04IulS0SYHM8Q Ddxef0zLi8sxC1Lt4N3 HIOZpbIRtU1eFIP0y8qbPJcTc1kvB4Pc5Ti1CUpWDSZktp3v6zyCo7fIavTM

Genau wie wir es erwartet haben. Gehen wir in unserem Selektor eine Ebene höher zu unserem

JXF9suUYnrtQvrU 8sIs3 NEA0BBS2hKkyRaigcZX26RHBcDZ376i87EpwGAsBEBYNaIjVUs FAsrMupPlC9CduIwFUCCBGj XgT Ol64YUdUPWEKZYgZDZ376i87EpwGAsBEBYNaIjVUs FAsrMupPlC9CduIwFUCCBGj XgT Ol64YUdUPWEKZYgZDZ376i87gn/divide_in mainfigur, <dreix0B_3xhtml() funktioniert, können wir ableiten, dass der obige Code die drei

-Tags mit dem als Parameter ubergebenen. Lesen Sie unseren Leitfaden zum Erlernen von HTML, um das obige Konzept zu vertiefen

In einer Codezeile haben wir drei verschiedene Absatzelemente ersetzt und verwendet unser ursprungliches Klassen-Styling.

Schlussfolgerung

jQuery html() ist eine häufig verwendete Methode zum Ersetzen von Inhalten auf HTML-Seiten, um ein dynamisches Erlebnis zu schaffen. Da html() den Inhalt ersetzt, der in HTML-Elemente eingeschlossen ist, ist es wichtig, auf die jQuery-Selektoren und alle Stilklassen zu achten. Dadurch werden unerwunschte Stiländerungen verhindert.

Wir haben gelernt, was jQuery ist, seine Syntax und ein Beispiel fur seine Verwendung. Verbringen Sie einige Zeit damit, diese weit verbreitete Methode zu uben und zu lernen.