Como criar um link usando JavaScript?
Por que você precisa criar links com JavaScript
O HTML permite que você coloque links dentro da tag âncora sob o atributo href. No entanto, ao desenvolver um aplicativo baseado em JavaScript, onde você deve lidar com tudo programaticamente, você precisa criar links dinamicamente e atribuí-los ao atributo href da tag HTML Anchor.
Esta é a principal razão pela qual você precisa de JavaScript para criar um link e é isso que vamos falar neste artigo, então vamos mergulhar profundamente em como podemos criar facilmente um link usando javascript.
Abordagem para criar um link
Para criar um link programaticamente, primeiro entendemos o que exatamente precisamos fazer.
Primeiro, precisamos criar uma tag de âncora usando JavaScript:
Crie uma tag de âncora
Para criar uma âncora, podemos utilizar o código fornecido abaixo. Crie um elemento (tag) e atribua -o à variável chamada "Anchor", como precisaremos mais tarde:
Depois de criar a tag de ancoragem, precisamos escrever algum texto dentro da tag, conforme demonstrado abaixo:
Site LinuxhintEscreva texto na tag
Para escrever algum texto dentro da tag, primeiro crie um nó de texto e depois anexa esse nó de texto quando criança à tag âncora. O código para escrever texto na etiqueta âncora será assim:
Deixe textNode = documento.CreateTextNode ("Site Linuxhint");
// Anexe o TextNode quando criança para ancorar.
âncora.appendChild (textNode);
Nesta fase, o texto é anexado à tag de âncora. Agora, precisamos colocar o link no atributo href da tag âncora, como mostrado abaixo.
Site LinuxhintDefina o atributo href da tag
Para colocar o link no atributo href da tag, a seguinte linha de código JavaScript será usada:
Depois de definir o Href atributo, a única coisa que resta é anexar a tag onde queremos que ela seja colocada.
Anexe a tag ao corpo HTML
Para anexar a tag âncora ao corpo, use a seguinte linha de código.
Tudo bem, você aprendeu todo o procedimento para criar um link usando JavaScript. Vamos passar por um exemplo para demonstrar os resultados.
Exemplo
Vamos dar um exemplo simples em que simplesmente criaremos um link e o anexaremos ao corpo HTML e verificaremos o comportamento do link se estiver funcionando ou não.
Html
Primeiro, criaremos um botão e, com o clique desse botão, o método createLink () será chamado.
JavaScript
Todo o código para criar o link será escrito dentro do createLink () Função e todo o código JavaScript será assim:
Deixe Anchor = documento.createElement ('a');
Let Link = Documento.CreateTextNode ("Site Linuxhint");
âncora.appendChild (link);
âncora.href = "https: // linuxhint.com/";
documento.corpo.ApndendChild (âncora);
Quando tudo estiver em ordem e pronto para ser executado, vamos verificar isso e executar o código.
Saída
Clique no botão e veja se ele está realmente criando o link para nós ou não.
Aqui na tela acima, você pode ver que, depois de clicar no botão, o link foi criado com sucesso e exibido em nossa página da web. Este link desistiu do endereço do Linuxhint.com o que significa que, se você clicar nele, você será direcionado para Linuxhint.com.
Lembre -se de que anexamos o link em nosso código JavaScript, é por isso que está aparecendo abaixo de tudo. Então agora, se você deseja prender o link para o topo de algum elemento HTML ou na parte superior da página, basta prender a tag âncora em vez de anexá -la ao corpo para alcançar esse objetivo.
Aperte a tag
A única mudança que precisamos é usar “documento.corpo.Preparar ” em vez de "documento.corpo.acrescentar" Para prender a tag de âncora ao topo da página acima de cada elemento.
Saída
Como você pode ver acima, o link foi preso.
Conclusão
O link pode ser facilmente criado através do JavaScript, criando primeiro uma tag usando o método CreateElement () e, posteriormente, o link pode ser anexado ao atributo href da tag. Este post forneceu a função completa para criar um link totalmente através do JavaScript sem tocar o HTML. Além disso, discutimos como anexar ou prender a tag âncora "" ao corpo usando exemplos detalhados.