Come creare un link usando JavaScript?

Ogni volta che stai sviluppando un'applicazione Web o un sito Web dovrai gestire URL e collegamenti che vengono frequentemente utilizzati per navigare da un utente da una pagina a un'altra, in quanto non esiste un altro modo per navigare con i tuoi utenti senza collegamenti e URL. Quindi, devi crearli e metterli nei luoghi esatti in cui si desidera navigare negli utenti.

Perché devi creare collegamenti con JavaScript

HTML consente di inserire collegamenti all'interno del tag di ancoraggio sotto l'attributo HREF. Tuttavia, mentre si sviluppa un'applicazione basata su JavaScript in cui è necessario gestire tutto a livello di programmazione, è necessario creare collegamenti in modo dinamico e assegnarli all'attributo HREF del tag di ancoraggio HTML.

Questo è il motivo principale per cui hai bisogno di JavaScript per creare un link e questo è ciò di cui parleremo in questo articolo, quindi facciamo un'immersione profonda su come possiamo facilmente creare un link usando JavaScript.

Approccio per creare un collegamento

Per creare un link a livello di programmazione, comprendiamo prima cosa dobbiamo fare esattamente.

Innanzitutto, dobbiamo creare un tag di ancoraggio usando JavaScript:

Crea un tag di ancoraggio
Per la creazione di un'ancora, possiamo utilizzare il codice fornito di seguito. Crea un elemento (tag) e assegnalo alla variabile denominata "ancoraggio" come ne avremo bisogno in seguito:

Let Anchor = Document.createElement ('a');

Dopo aver creato il tag di ancoraggio, dobbiamo scrivere un po 'di testo all'interno del tag come dimostrato di seguito:

Sito Web LinuxHint

Scrivi il testo nel tag
Per scrivere un po 'di testo all'interno del tag, prima crea un nodo di testo e quindi aggiungi quel nodo di testo come figlio al tag di ancoraggio. Il codice per scrivere testo nel tag di ancoraggio andrà così:

// crea un nodo di testo e assegnalo alla variabile "link".
Let textNode = document.CreateTextNode ("Web LinuxHint");
// Aggiungi textNode da bambino ad ancorare.
ancora.AppendChild (TextNode);

In questa fase, il testo viene aggiunto al tag di ancoraggio. Ora, dobbiamo inserire il collegamento nell'attributo HREF del tag di ancoraggio come mostrato di seguito.

Sito Web LinuxHint

Imposta l'attributo HREF del tag
Per inserire il collegamento nell'attributo HREF del tag, verrà utilizzata la seguente riga di codice JavaScript:

ancora.href = "https: // linuxhint.com/";

Dopo aver impostato il Href attributo, l'unica cosa rimasta è aggiungere il tag dove vogliamo che venga messo.

Aggiungi il tag al corpo HTML
Per aggiungere il tag di ancoraggio al corpo, utilizzare la seguente riga di codice.

documento.corpo.AppendChild (ancoraggio);

Bene, hai imparato tutta la procedura per creare un link usando JavaScript. Facciamo un esempio per dimostrare i risultati.

Esempio

Facciamo un semplice esempio in cui creeremo semplicemente un link e aggiungiamolo al corpo HTML e controlleremo il comportamento del collegamento se funziona o no.

Html
Innanzitutto, creeremo un pulsante e con il clic di quel pulsante il metodo createLink () verrà chiamato.

JavaScript
Tutto il codice per la creazione del collegamento verrà scritto all'interno del createLink () funzione e l'intero codice JavaScript andrà così:

funzione createLink ()
Let Anchor = Document.createElement ('a');
Let Link = Document.CreateTextNode ("Web LinuxHint");
ancora.appendChild (link);
ancora.href = "https: // linuxhint.com/";
documento.corpo.AppendChild (ancoraggio);

Una volta che tutto è in ordine e pronto per essere eseguito, verifichiamo questo ed eseguiamo il codice.

Produzione

Fare clic sul pulsante e vedere se sta effettivamente creando il collegamento per noi o no.

Qui nella schermata sopra, puoi vedere che dopo aver fatto clic sul pulsante, il collegamento è stato creato correttamente e visualizzato sulla nostra pagina web. Questo link ha rinunciato all'indirizzo di Linuxhint.com, il che significa che se fai clic su di esso verrai indirizzato a Linuxhint.com.

Ricorda che abbiamo aggiunto il link nel nostro codice JavaScript ecco perché appare sotto tutto. Quindi ora se vuoi preparare il collegamento alla parte superiore di un elemento HTML o nella parte superiore della pagina, è sufficiente preparare il tag di ancoraggio invece di aggiungerlo al corpo per raggiungere questo obiettivo.

Preparare il tag
L'unico cambiamento di cui abbiamo bisogno è usare "documento.corpo.preparare " invece di "documento.corpo.aggiungere" per preparare il tag di ancoraggio nella parte superiore della pagina sopra ogni elemento.

documento.corpo.preparare (ancoraggio);

Produzione

Come puoi vedere sopra, il collegamento è stato preparato sopra ogni elemento HTML ed è cliccabile con l'indirizzo collegato ad esso.

Conclusione

Il collegamento può essere facilmente creato tramite JavaScript creando prima un tag utilizzando il metodo createElement () e successivamente il collegamento può essere allegato all'attributo HREF del tag. Questo post ha fornito la funzione completa per la creazione di un link totalmente tramite JavaScript senza toccare l'HTML. Inoltre, abbiamo discusso di come aggiungere o preparare il tag di ancoraggio "" al corpo usando esempi dettagliati.

C ++

Come usare le espressioni booleane in C ++

Un'espressione booleana è una combinazione di operatori con un operando e viene utilizzata per confr...

Sarita Negri

Programmazione C

istruzione if-else nella programmazione C

L'istruzione IF-ELSE è un concetto cruciale nella programmazione C che consente il processo decision...

Nick Marini

PHP

Come utilizzare la funzione substr_replace in PHP

In PHP, substr_replace () è una funzione integrata utilizzata per sostituire una parte di una string...

Dr. Evita Damico