Como crio um link usando javascript?

128

Eu tenho uma string para um título e uma string para um link. Não sei como reunir os dois para criar um link em uma página usando Javascript. Qualquer ajuda é apreciada.

EDIT1: Adicionando mais detalhes à pergunta. A razão pela qual estou tentando descobrir isso é porque tenho um feed RSS e uma lista de títulos e URLs. Gostaria de vincular os títulos ao URL para tornar a página útil.

EDIT2: Estou usando o jQuery, mas sou completamente novo e não sabia que poderia ajudar nessa situação.

— Xavier
fonte

Você está carregando o feed RSS com jQuery ou algo assim (Mootools, Dojo, Atlas, etc ...)? Se você estiver tentando criar dinamicamente tags âncora com base em uma lista RSS de terceiros adquirida no carregamento da página, sugiro usar a biblioteca jQuery ou outra para adicionar o elemento. Os detalhes neste caso são importantes para saber o que precisa ser feito. No entanto, os métodos DOM são uma ilustração útil.

— Jared Farrish

experimentar esta ligação Eu acho que pode ser benéfico

— Yitzhak Weinberg

227

<html>
  <head></head>
  <body>
    <script>
      var a = document.createElement('a');
      var linkText = document.createTextNode("my title text");
      a.appendChild(linkText);
      a.title = "my title text";
      a.href = "http://example.com";
      document.body.appendChild(a);
    </script>
  </body>
</html>

— Jared Farrish
fonte

1

Este é um exemplo muito genérico de uso de métodos DOM para adicionar uma marca de âncora a uma página. Por exemplo, o método appendChild pode ser um elemento da lista, TD ou outro elemento dentro da página. Veja: quirksmode.org

— Jared Farrish

5

@Nadu - Por favor, pare de editar minha resposta. Se você quiser que algo específico seja dito, adicione um; se não for "diferente" o suficiente para justificá-lo, não será diferente o suficiente para justificar uma edição.

— Jared Farrish

plnkr.co/edit/mV7nOBIHa6hMNaVIPG75?p=preview Fui criado um exemplo de plunker.

— Harold Castillo

61

Com JavaScript

var a = document.createElement('a');
a.setAttribute('href',desiredLink);
a.innerHTML = desiredText;
// apend the anchor to the body
// of course you can append it almost to any other dom element
document.getElementsByTagName('body')[0].appendChild(a);

document.getElementsByTagName('body')[0].innerHTML += '<a href="'+desiredLink+'">'+desiredText+'</a>';

ou, como sugerido por @travis :

document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

<script type="text/javascript">
//note that this case can be used only inside the "body" element
document.write('<a href="'+desiredLink+'">'+desiredText+'</a>');
</script>

Com JQuery

$('<a href="'+desiredLink+'">'+desiredText+'</a>').appendTo($('body'));

$('body').append($('<a href="'+desiredLink+'">'+desiredText+'</a>'));

var a = $('<a />');
a.attr('href',desiredLink);
a.text(desiredText);
$('body').append(a);

Em todos os exemplos acima, você pode anexar a âncora a qualquer elemento, não apenas ao 'corpo', e desiredLinké uma variável que contém o endereço para o qual seu elemento âncora aponta e desiredTexté uma variável que contém o texto que será exibido em o elemento âncora.

— gion_13
fonte

3

Eu acho que o único que você deixou de fora é:document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

— travis

1

Para evitar o XSS, você deve evitar a concatenação de strings ( +) e .innerHTMLao criar HTML. Com jQuery, .attr("href", desiredLink)e .text(desiredText)é o que você deseja aqui.

— amigos estão dizendo sobre Wes Turner

15

Crie links usando JavaScript:

<script language="javascript">
<!--
document.write("<a href=\"www.example.com\">");
document.write("Your Title");
document.write("</a>");
//-->
</script>

OU

<script type="text/javascript">
document.write('Your Title'.link('http://www.example.com'));
</script>

OU

<script type="text/javascript">
newlink = document.createElement('a');
newlink.innerHTML = 'Google';
newlink.setAttribute('title', 'Google');
newlink.setAttribute('href', 'http://google.com');
document.body.appendChild(newlink);
</script>

— Naveed
fonte

12

Existem algumas maneiras:

Se você quiser usar o Javascript bruto (sem um auxiliar como o JQuery), poderá fazer algo como:

var link = "http://google.com";
var element = document.createElement("a");
element.setAttribute("href", link);
element.innerHTML = "your text";

// and append it to where you'd like it to go:
document.body.appendChild(element);

O outro método é escrever o link diretamente no documento:

document.write("<a href='" + link + "'>" + text + "</a>");

— Roopinder
fonte

Eu definitivamente gosto mais da primeira opção. +1 para isso, mas a mistura de JS e HTML combina conteúdo e comportamento, que devem ser separados. Exagerado, isso pode levar a um pesadelo de manutenção.

— precisa saber é o seguinte

Eu também prefiro a primeira opção, mas talvez usando o JQuery para obter o mesmo efeito (para facilitar a leitura e facilitar a manutenção).

— Roopinder

1

Você provavelmente deve evitar usar document.write stackoverflow.com/questions/4520440/...

— tryharder

4

    <script>
      _$ = document.querySelector  .bind(document) ;

        var AppendLinkHere = _$("body") // <- put in here some CSS selector that'll be more to your needs
        var a   =  document.createElement( 'a' )
        a.text  = "Download example" 
        a.href  = "//bit\.do/DeezerDL"

        AppendLinkHere.appendChild( a )
        

     // a.title = 'Well well ... 
        a.setAttribute( 'title', 
                         'Well well that\'s a link'
                      );
    </script>

Expandir snippet

O 'Objeto âncora' possui suas próprias propriedades * (herdadas) * para definir o link, seu texto. Então, apenas use-os. .setAttribute é mais geral, mas você normalmente não precisa. a.title ="Blah"fará o mesmo e é mais claro! Bem, uma situação que exigirá .setAttribute é esta:var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")
Deixe o protocolo aberto. Em vez de http: //example.com/path, considere usar apenas //example.com/path. Verifique se example.com pode ser acessado por http: assim como https: mas 95% dos sites funcionarão em ambos.
OffTopic: Isso não é realmente relevante sobre a criação de links em JS, mas talvez seja bom saber: Bem, às vezes, como no console de desenvolvimento de cromos que você pode usar, em$("body")vez dedocument.querySelector("body")A_$ = document.querySelector, 'honra' seus esforços com umerro de invocação ilegal na primeira vez em que você o usa. Isso ocorre porque a atribuição apenas 'agarra' .querySelector (uma referência ao métododa classe ). Com isso,.bind(...você também envolverá o contexto (aqui estádocument) e obterá ummétodo de objeto que funcionará conforme o esperado.

— Nadu
fonte

3

Crie dinamicamente um hiperlink com JavaScript bruto:

   var anchorElem = document.createElement('a');
   anchorElem.setAttribute("href", yourLink);
   anchorElem.innerHTML = yourLinkText;

   document.body.appendChild(anchorElem); // append your new link to the body

— jmort253
fonte

Use `anchorElem.text = yourLinkText; `em vez do innerHTML, isso ficará mais claro. E sim, considere o que acontecerá se o seuLinkText for talvez "<- isso é legal!"

— Nadu

-4

Você cola isso dentro:

<A HREF = "index.html">Click here</A>

— zerodunwash
fonte

O OP está pedindo explicitamente a criação de um link com JavaScript (não HTML)!

— hatef