Come creare un link usando JavaScript?
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:
Dopo aver creato il tag di ancoraggio, dobbiamo scrivere un po 'di testo all'interno del tag come dimostrato di seguito:
Sito Web LinuxHintScrivi 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ì:
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 LinuxHintImposta l'attributo HREF del tag
Per inserire il collegamento nell'attributo HREF del tag, verrà utilizzata la seguente riga di codice JavaScript:
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.
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ì:
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.
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.