Hvordan lage en lenke ved hjelp av JavaScript?
Hvorfor trenger du å lage lenker med JavaScript
HTML lar deg legge lenker inne i ankerkoden under HREF -attributtet. Imidlertid, mens du utvikler en JavaScript-basert applikasjon der du må håndtere alt programmatisk, må du lage lenker dynamisk og tilordne dem til HREF-attributtet til HTML-ankerkoden.
Dette er den viktigste grunnen til at du trenger JavaScript for å lage en lenke, og det er dette vi skal snakke om i denne artikkelen, så la oss ha et dypt dykk på hvordan vi enkelt kan lage en lenke ved hjelp av Javascript.
Tilnærming for å lage en lenke
For å lage en lenke programmatisk, forstår vi først hva vi trenger å gjøre.
Først må vi lage en ankerkode ved hjelp av JavaScript:
Lag en ankerkode
For å lage et anker, kan vi bruke koden som er gitt nedenfor. Lag et element (tag) og tilordne det til variabelen som heter "anker" slik vi trenger det senere:
Etter å ha opprettet ankerkoden, må vi skrive litt tekst i taggen som demonstrert nedenfor:
Linuxhint nettstedSkriv tekst inn i taggen
For å skrive litt tekst inne i taggen, lag først en tekstnode og legg deretter til den tekstnoden som barn til ankerkoden. Koden for å skrive tekst til ankerkoden vil gå slik:
La tekstnode = dokument.CreateTextNode ("Linuxhint nettsted");
// Legg til tekstnoden som barn til anker.
anker.appendchild (textNode);
På dette stadiet er teksten lagt inn i ankerkoden. Nå må vi legge lenken i Href -attributtet til ankerkoden som vist nedenfor.
Linuxhint nettstedAngi Href -attributtet til taggen
For å sette lenken i HREF -attributtet til TAG vil følgende linje med JavaScript -kode bli brukt:
Etter å ha satt href Attributt, det eneste som er igjen er å legge til taggen der vi vil at den skal legges.
Legg til taggen til HTML -kroppen
For å legge ankerkoden til kroppen, bruk følgende kodelinje.
OK, du har lært all prosedyren for å opprette en lenke ved hjelp av JavaScript. La oss gå gjennom et eksempel for å demonstrere resultatene.
Eksempel
La oss ta et enkelt eksempel der vi ganske enkelt vil lage en lenke og legge den til HTML -kroppen og vil sjekke atferden til lenken hvis den fungerer eller ikke.
Html
Først oppretter vi en knapp og med et klikk på den knappen kalles CreateLink () -metoden.
JavaScript
All koden for å opprette lenken vil bli skrevet i creatElink () Funksjon og hele JavaScript -koden vil gå slik:
La anker = dokument.CreateElement ('A');
La lenke = dokument.CreateTextNode ("Linuxhint nettsted");
anker.vedlegg (lenke);
anker.href = "https: // linuxhint.com/";
dokument.kropp.vedlegg (anker);
Når alt er i orden og er klar til å bli utført, la oss bekrefte dette og kjøre koden.
Produksjon
Klikk på knappen og se om den faktisk oppretter lenken for oss eller ikke.
Her på skjermen ovenfor kan du se at etter å ha klikket på knappen, ble lenken opprettet vellykket og vist på websiden vår. Denne lenken har gitt opp adressen til Linuxhint.com som betyr at hvis du klikker på det, blir du ledet til Linuxhint.com.
Husk at vi har lagt til lenken i vår JavaScript -kode, det er derfor den vises under alt. Så nå hvis du vil forberede lenken til toppen av et HTML -element eller øverst på siden, kan du bare forberede ankerkoden i stedet for å legge den til kroppen for å oppnå dette målet.
Prepend taggen
Den eneste endringen vi trenger er å bruke “dokument.kropp.prepend ” i stedet for "dokument.kropp.vedlegg ” For å forberede ankerkoden øverst på siden over hvert element.
Produksjon
Som du ser ovenfor, ble lenken forhåndsutviklet på toppen av hvert HTML -element og kan klikkes med adressen som er knyttet til den.
Konklusjon
Kobling kan enkelt opprettes gjennom JavaScript ved først å lage en tag ved hjelp av CreateElement () -metoden, og senere kan lenken festes til HREF -attributtet til TAG. Dette innlegget har gitt den komplette funksjonen for å lage en lenke totalt gjennom JavaScript uten å berøre HTML. Dessuten har vi diskutert hvordan du legger til eller forhåndsanker ankerkoden "" til kroppen ved hjelp av detaljerte eksempler.