Come creo un collegamento utilizzando javascript?

128

Ho una stringa per un titolo e una stringa per un collegamento. Non sono sicuro di come mettere insieme i due per creare un collegamento in una pagina utilizzando Javascript. Qualsiasi aiuto è apprezzato.

EDIT1: aggiunta di ulteriori dettagli alla domanda. Il motivo per cui sto cercando di capirlo è perché ho un feed RSS e ho un elenco di titoli e URL. Vorrei collegare i titoli all'URL per rendere la pagina utile.

EDIT2: Sto usando jQuery ma sono completamente nuovo e non sapevo che potesse aiutare in questa situazione.

— Xavier
fonte

Stai caricando il feed RSS con jQuery o qualcosa del genere (Mootools, Dojo, Atlas, ecc ...)? Se stai cercando di creare dinamicamente tag di ancoraggio in base a un elenco RSS di terze parti acquisito al caricamento della pagina, ti suggerirei di utilizzare la libreria jQuery o altro per aggiungere l'elemento. I dettagli in questo caso sono importanti per sapere cosa è necessario fare. Tuttavia, i metodi DOM sono un'utile illustrazione.

— Jared Farrish

prova questo link penso che possa essere utile

— 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

Questo è un esempio molto generico di utilizzo dei metodi DOM per aggiungere un anchor tag a una pagina. Ad esempio, il metodo appendChild potrebbe essere un elemento di elenco, TD o un altro elemento all'interno della pagina. Vedi: quirksmode.org

— Jared Farrish

5

@Nadu - Per favore smetti di modificare la mia risposta. Se vuoi che venga detta una cosa specifica, aggiungine una tua; se non è abbastanza "diverso" da giustificarlo, non è abbastanza diverso da giustificare una modifica.

— Jared Farrish

plnkr.co/edit/mV7nOBIHa6hMNaVIPG75?p=preview Sono stato creato un esempio di plunker.

— Harold Castillo

61

Con 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>';

oppure, come suggerito da @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>

Con 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);

In tutti gli esempi precedenti puoi aggiungere l'ancora a qualsiasi elemento, non solo al 'corpo', ed desiredLinkè una variabile che contiene l'indirizzo a cui punta il tuo elemento di ancoraggio ed desiredTextè una variabile che contiene il testo che verrà visualizzato in l'elemento di ancoraggio.

— gion_13
fonte

3

Penso che l'unico che hai tralasciato sia:document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

— travis

1

Per evitare XSS, dovresti evitare la concatenazione di stringhe ( +) e .innerHTMLdurante la creazione di HTML. Con jQuery, .attr("href", desiredLink)e .text(desiredText)sei quello che vuoi qui.

— Wes Turner

15

Crea collegamenti utilizzando JavaScript:

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

O

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

O

<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

Ci sono un paio di modi:

Se vuoi usare Javascript grezzo (senza un helper come JQuery), allora potresti fare qualcosa come:

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);

L'altro metodo è scrivere il collegamento direttamente nel documento:

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

— roopinder
fonte

La prima opzione mi piace decisamente di più. +1 per questo, ma mescolare JS e HTML mescola contenuto e comportamento, che dovrebbero essere separati. Esagerato, questo può portare a un incubo di manutenzione.

— jmort253

Tendo a preferire anche la prima opzione, ma forse usando JQuery per ottenere lo stesso effetto (per leggibilità e facilità di manutenzione).

— Roopinder

1

Probabilmente dovresti evitare di utilizzare 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>

Espandi lo snippet

L '"Oggetto di ancoraggio" ha le sue proprietà * (ereditate) * per l'impostazione del collegamento, il suo testo. Quindi usali e basta. .setAttribute è più generale ma normalmente non ne hai bisogno. a.title ="Blah"farà lo stesso ed è più chiaro! Bene, una situazione che richiederà .setAttribute è questa:var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")
Lascia il protocollo aperto. Invece di http: //example.com/path, considera di utilizzare solo //example.com/path. Controlla se è possibile accedere a example.com sia da http: che da https: ma il 95% dei siti funzionerà su entrambi.
OffTopic: Non è molto rilevante per la creazione di collegamenti in JS, ma forse è utile sapere: beh, a volte, come nella console di sviluppo di chromes, puoi usare$("body")invece didocument.querySelector("body")A_$ = document.querySelector"onorare" i tuoi sforzi con unerrore di invocazione illegale la prima volta che lo usi. Questo perché l'assegnazione "afferra" .querySelector (un riferimento al metododella classe ). Con.bind(...coinvolgerai anche il contesto (eccolo quidocument) e otterrai unmetodo oggetto che funzionerà come potresti aspettarti.

— Nadu
fonte

3

Crea dinamicamente un collegamento ipertestuale con JavaScript grezzo:

   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

Usa `anchorElem.text = yourLinkText; `invece di innerHTML sarà più chiaro. E sì, considera cosa succederà se il tuoLinkText è forse "<- è fantastico!"

— Nadu

-4

Incolla questo all'interno:

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

— zerodunwash
fonte

L'OP chiede esplicitamente di creare un collegamento con JavaScript (non HTML)!

— hatef