Jak utworzyć link za pomocą JavaScript?
Dlaczego musisz tworzyć linki z JavaScript
HTML umożliwia umieszczenie linków do znacznika kotwicy pod atrybutem HREF. Jednak podczas opracowywania aplikacji opartej na JavaScript, w której musisz obsługiwać wszystko programowo, musisz dynamicznie utworzyć linki i przypisać je do atrybutu HREF znacznika Anchor HTML.
To jest główny powód, dla którego potrzebujesz JavaScript, aby utworzyć link i o tym będziemy porozmawiać w tym artykule, więc zanurzmy się w głębokie zanurzenie, w jaki sposób możemy łatwo stworzyć link za pomocą JavaScript.
Podejście do utworzenia linku
Aby utworzyć link programowo, najpierw rozumiemy, co dokładnie musimy zrobić.
Najpierw musimy utworzyć znacznik zakotwiczenia za pomocą JavaScript:
Utwórz znacznik Anchor
Do tworzenia kotwicy możemy wykorzystać kod podany poniżej. Utwórz element (tag) i przypisz go do zmiennej o nazwie „Kotwica”, ponieważ będziemy go potrzebować później:
Po utworzeniu znacznika kotwicy musimy napisać tekst wewnątrz znacznika, jak pokazano poniżej:
Witryna LinuxhintNapisz tekst w tagu
Aby zapisać tekst wewnątrz znacznika, najpierw utwórz węzeł tekstowy, a następnie dołącz ten węzeł tekstowy jako dziecko do znacznika kotwicy. Kod do pisania tekstu do znacznika kotwicy będzie tak:
Niech TextNode = dokument.CreateTextNode („Linuxhint Witryna”);
// dołącz do dziecka jako dziecko.
kotwica.appendChild (textNode);
Na tym etapie tekst jest dołączany do znacznika kotwicy. Teraz musimy umieścić link w atrybucie HREF znacznika kotwicy, jak pokazano poniżej.
Witryna LinuxhintUstaw atrybut HREF TAG
Aby umieścić link w atrybucie HREF znacznika, zostanie użyty następujący wiersz kodu JavaScript:
Po ustawieniu Href atrybut, jedyne, co pozostało, jest dołączenie tagu, w którym chcemy, aby został umieszczony.
Dodaj tag do ciała HTML
Aby dołączyć znacznik zakotwiczenia do ciała, użyj następującego wiersza kodu.
W porządku, nauczyłeś się całej procedury utworzenia linku za pomocą JavaScript. Przejrzyjmy przykład, aby zademonstrować wyniki.
Przykład
Weźmy prosty przykład, w którym po prostu utworzymy link i dołączymy go do ciała HTML i sprawdzamy zachowanie linku, jeśli działa, czy nie.
Html
Najpierw utworzymy przycisk i przy kliknięciu tego przycisku zostanie wywołana metoda CreateLink ().
JavaScript
Cały kod do tworzenia linku zostanie zapisany w środku createLink () Funkcja i cały kod JavaScript pójdzie w ten sposób:
Niech Anchor = dokument.createElement („a”);
Niech link = dokument.CreateTextNode („Linuxhint Witryna”);
kotwica.appendChild (link);
kotwica.href = "https: // linuxhint.com/";
dokument.ciało.appendchild (kotwica);
Gdy wszystko jest w porządku i gotowe do wykonania, sprawdźmy to i uruchommy kod.
Wyjście
Kliknij przycisk i sprawdź, czy faktycznie tworzy link dla nas, czy nie.
Tutaj na powyższym ekranie widać, że po kliknięciu przycisku, link został pomyślnie utworzony i wyświetlony na naszej stronie internetowej. Ten link zrezygnował z adresu Linuxhint.com, co oznacza, że jeśli go klikniesz, zostaniesz skierowany do Linuxhint.com.
Pamiętaj, że dołączyliśmy link w naszym kodzie JavaScript, dlatego pojawia się on poniżej wszystkiego. Więc teraz, jeśli chcesz przygotować link do góry jakiegoś elementu HTML lub u góry strony, po prostu przygotuj znacznik kotwicy zamiast dołączać go do ciała, aby osiągnąć ten cel.
Przygotuj tag
Jedyną zmianą, której potrzebujemy, jest użycie „dokument.ciało.przygotować ” zamiast "dokument.ciało.dodać" Aby przygotować znacznik kotwicy na górze strony powyżej każdego elementu.
Wyjście
Jak widać powyżej, link został przygotowany na każdy element HTML i można je kliknąć z dołączonym adresem.
Wniosek
Link można łatwo utworzyć za pośrednictwem JavaScript, najpierw utworzenie znacznika za pomocą metody createElement (), a później łącza można dołączyć do atrybutu HREF znacznika. Ten post dostarczył pełną funkcję tworzenia linku całkowicie za pośrednictwem JavaScript bez dotykania HTML. Ponadto omówiliśmy, jak dołączyć lub przygotować znacznik kotwicy „” do ciała za pomocą szczegółowych przykładów.