HTML-Javascript-methode

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

jQuery biedt vele methoden om ontwikkelaars te helpen effectief een dynamische webervaring te creëren. De jQuery html () methode vervangt alle HTML in het geselecteerde element. Dit is handig als u dynamisch wilt wijzigen wat de gebruiker ziet na interactie met de pagina.

In deze handleiding leren we hoe u html () en zijn syntaxis. We zullen ook een stapsgewijze benadering volgen voor het gebruik van html (). jQuery html () is een fundamentele methode van de jQuery-bibliotheek en wordt vaak gebruikt. Nadat je de basis hebt geleerd, ben je klaar om te beginnen met oefenen met html ().

Wat is jQuery html ()?

jQuery html () zet de HTML-inhoud van elk element in een set overeenkomende elementen. Zorg ervoor dat u een zoekopdracht geeft die voldoende nauwkeurig is om alleen de gewenste HTML te vervangen.

Alleen de inhoud wordt bewerkt met html (). Als er een stylesheet is, zal de nieuwe inhoud dezelfde stijl hebben als de vorige inhoud. Het is ook vermeldenswaard dat html () alleen werkt op HTML-documenten - het werkt niet met XML.

html () jQuery-syntaxis

Onthoud dat jQuery-methoden worden eerst aangeroepen op een selector. De selector kan zo groot zijn als een

tag of zo specifiek als ). Zodra we het gewenste element hebben geselecteerd, kunnen we html () aanroepen en een HTML-string als parameter doorgeven aan html (). Voor een gedetailleerde uitleg van CSS selectors, zie onze gids .

html () accepteert een letterlijke tekenreeks als een parameter of een variabele die de tekenreeks bevat. Het doorgeven van een letterlijke tekenreeks van "Nieuwe inhoud" wordt weergegeven als het doorgeven van een variabele die verwijst naar "Nieuwe inhoud".

Stel dat we deze simpele

We kunnen de hele

tag:

De bovenstaande code toont de nieuwe HTML als:

Als er een stijl was die was gekoppeld aan de originele

tag , zou deze niet langer actief zijn met de nieuwe inhoud. Het is ook mogelijk om een simpele string door te geven:

Onze code HTML is nu als volgt:

We kunnen zien dat er enkele verschillen zijn in de nieuwe inhoud. Het doorgeven van een letterlijke tekenreeks is een geweldige manier om de stijl van de vorige inhoud te behouden. Onthoud dat een letterlijke tekenreeks slechts een tekenreeks is die tekens bevat. Als de nieuwe inhoud een onderliggend element moet zijn, kunt u dit doen door een HTML-tekenreeks te gebruiken.

Nu de basissyntaxis is behandeld, gaan we een voorbeeld bekijken.

p>

jQuery html () voorbeeld

We hebben gezien hoe html () de inhoud in het geselecteerde element vervangt in ons voorbeeld "Nieuwe inhoud". Dit kan worden bereikt door een letterlijke tekenreeks of een HTML-tekenreeks als parameter door te geven. Laten we een voorbeeld bekijken waarin we de originele stijl behouden.

Als we naar onze oorspronkelijke HTML-pagina kijken, zien we alleen het woord "Hallo" gestileerd met de kleur blauw.

In dit voorbeeld willen we om het woord " Hallo " te vervangen door nieuwe inhoud, met behoud van de originele stijl. Hiervoor selecteren we de alinea met de naam van de blauwe klasse.

We hebben de paragraaf die bij de blauwe klasse hoort geselecteerd en "Hello" vervangen door "Hello AGAIN". Aangezien html () de inhoud in de elementnamen vervangt, blijft de blauwe kleur behouden.

< Figure class = "wp-image-block"> A83aaFCGA71IBKWgL4WyaFqn GeP4fN7kwWBtZnN4Xmhk9dfSP85teVs83FA2w8myG0SsPwzmfMP8RagLyBGr0JCb8XgEpQ88AFUpD 5iatEp Im3xzfqRKD35rOb9xjhLoN1Na

Wat gebeurt er als we willen alle tekst in de alinea vervangen? Als we het

element selecteren, zal het de bovenstaande tekst vervangen door drie instanties van " Hallo OPNIEUW. ‚"

Hier selecteren we de hele alinea met tags in het HTML-bestand en vervangen we de inhoud van elk door "Hello Again". of het plaatsen envelop inhoud pe in deze tags.

2guefy2uVdRQb3zbHpmF0SeFtMBttoqGZfEwZJn0nS04IulS0SYHM8Q Ddxef0zLi8sxC1Lt4N3 HIOZpbIRtU1eFIP0y8qbPJcTc1kvB4Pc5Ti1CUpWDSZktp3v6zyCo7fIavTM

Net zoals we hadden gehoopt. we gaan een niveau omhoog in onze selector om onze  JXF9suUYnrtQvrU 8sIs3 NEA0BBS2hKkyRaigcZX26RHBcDZ376i87EpwGAsBEBYNaIjVUs FAsrMupPlC9CduIwFUCCBGj Ol64YUdUPWEKZYgZX26RHBcDZ376i87EpwGAsBEBYNaIjVUs FAsrMupPlC9CduIwFUCCBGj XGT XGT Ol64YUdUPWEKZYXX6D heeft ons element>. </p Weten hoe u <code> html () </code>, kan men afleiden dat de bovenstaande code - hierboven de drie <p>tags vervangt door degene die als parameter is doorgegeven. Lees onze <a href=gids over het leren van HTML voor meer informatie over het bovenstaande

En één regel code, we hebben drie verschillende alinea-elementen vervangen en onze eigen originele klassenstijl gebruikt.

Conclusie

jQuery html () is een veelgebruikte methode om de inhoud van HTML-pagina`s te vervangen om een dynamische ervaring te creëren e html () inhoud vervangt die is opgenomen in HTML-elementen, het is belangrijk om voorzichtig te zijn met jQuery-selectors en stijlklassen. Dit voorkomt ongewenste stijlveranderingen.

We hebben geleerd wat jQuery is, de syntaxis en een voorbeeld van gebruik. Besteed tijd aan het oefenen en ontwikkelen van deze veelgebruikte methode.