So erstellen Sie einen Link mit JavaScript?
Warum müssen Sie Links mit JavaScript erstellen?
Mit HTML können Sie Links in das Anker -Tag unter dem HREF -Attribut einstellen. Während Sie jedoch eine auf JavaScript-basierte Anwendung entwickeln, bei der Sie alles programmatisch verarbeiten müssen, müssen Sie Links dynamisch erstellen und dem HREF-Attribut des HTML-Anker-Tags zuweisen.
Dies ist der Hauptgrund, warum Sie Javascript benötigen, um einen Link zu erstellen.
Ansatz, um einen Link zu erstellen
Um einen Link programmatisch zu erstellen, verstehen wir zunächst genau, was wir tun müssen.
Zunächst müssen wir mit JavaScript ein Anker -Tag erstellen:
Erstellen Sie ein Anker -Tag
Zum Erstellen eines Ankers können wir den unten angegebenen Code verwenden. Erstellen Sie ein Element (Tag) und weisen Sie es der Variablen mit dem Namen „Anker“ zu, da wir es später benötigen:
Nachdem wir das Anker -Tag erstellt haben, müssen wir einen Text in das Tag schreiben, wie unten gezeigt:
LinuxHint -WebsiteSchreiben Sie Text in das Tag
Erstellen Sie zum Schreiben eines Textes in das Tag zuerst einen Textknoten und fügen Sie diesen Textknoten als Kind am Anker -Tag zu. Der Code zum Schreiben von Text in das Anker -Tag wird so verlaufen:
Lassen Sie TextNode = Dokument.CreateTextNode ("LinuxHint -Website");
// Die Texnode als Kind an den Anker anhängen.
Anker.appendChild (TextNode);
In dieser Phase wird der Text in das Anker -Tag angehängt. Jetzt müssen wir den Link in das HREF -Attribut des Anker -Tags einstellen, wie unten gezeigt.
LinuxHint -WebsiteLegen Sie das HREF -Attribut des Tags fest
Um den Link in das HREF -Attribut von Tag zu setzen, wird die folgende Zeile des JavaScript -Codes verwendet:
Nach dem Einstellen der href Attribut, das einzige, was noch übrig ist, besteht.
Hängen Sie das Tag an HTML -Körper an
Verwenden Sie die folgende Codezeile, um das Anker -Tag an den Körper anzuhängen.
Okay, Sie haben das gesamte Verfahren gelernt, um einen Link mit JavaScript zu erstellen. Lassen Sie uns ein Beispiel durchgehen, um die Ergebnisse zu demonstrieren.
Beispiel
Nehmen wir ein einfaches Beispiel, in dem wir einfach einen Link erstellen und ihn an den HTML -Körper anhängen und das Verhalten des Links überprüfen, wenn er funktioniert oder nicht.
Html
Zunächst erstellen wir eine Schaltfläche und beim Klicken auf diese Schaltfläche wird die Methode createLink () aufgerufen.
JavaScript
Der gesamte Code zum Erstellen des Links wird in die geschrieben Verknüpfung erstellen() Funktion und der gesamte JavaScript -Code werden so verlaufen:
Sei Anchor = Dokument.CreateLement ('a');
link link = document.CreateTextNode ("LinuxHint -Website");
Anker.appendChild (link);
Anker.href = "https: // linuxHint.com/";
dokumentieren.Körper.appendChild (Anker);
Sobald alles in Ordnung und bereit ist, um ausgeführt zu werden, lassen Sie uns dies überprüfen und den Code ausführen.
Ausgang
Klicken Sie auf die Schaltfläche und prüfen Sie, ob er den Link für uns tatsächlich erstellt oder nicht.
Hier im obigen Bildschirm sehen Sie, dass der Link nach dem Klicken auf die Schaltfläche erfolgreich erstellt und auf unserer Webseite angezeigt wurde. Dieser Link hat die Adresse von LinuxHint aufgegeben.com, was bedeutet, wenn Sie darauf klicken, werden Sie an LinuxHint gerichtet.com.
Denken Sie daran, dass wir den Link in unserem JavaScript -Code angehängt haben. Deshalb erscheint er unter allem unter allem. Wenn Sie nun den Link auf ein HTML -Element oder oben auf der Seite vorbereiten möchten.
Bereiten Sie das Tag vor
Die einzige Änderung, die wir brauchen, ist zu verwenden “dokumentieren.Körper.vorbereiten “ anstatt "dokumentieren.Körper.anhängen “ Vorbereitung des Anker -Tags oben auf der Seite über jedem Element.
Ausgang
Wie Sie oben sehen können, wurde der Link auf jedem HTML.
Abschluss
Link kann problemlos über JavaScript erstellt werden, indem zuerst ein Tag mit der Methode createLement () erstellt wird. Später kann der Link an das HREF -Attribut von Tag angehängt werden. Dieser Beitrag hat die vollständige Funktion zum Erstellen eines Links über JavaScript bereitgestellt, ohne die HTML zu berühren. Darüber hinaus haben wir mit detaillierten Beispielen besprochen, wie das Anker -Tag „an den Körper vorbereitet“ oder an den Körper vorbereitet werden kann oder vorbereitet werden.