Wie erstelle ich einen Link mit Javascript?

127

Ich habe eine Zeichenfolge für einen Titel und eine Zeichenfolge für einen Link. Ich bin mir nicht sicher, wie ich die beiden zusammenfügen soll, um mit Javascript einen Link auf einer Seite zu erstellen. Jede Hilfe wird geschätzt.

EDIT1: Hinzufügen weiterer Details zur Frage. Der Grund, warum ich das herausfinden möchte, ist, dass ich einen RSS-Feed und eine Liste mit Titeln und URLs habe. Ich möchte die Titel mit der URL verknüpfen, um die Seite nützlich zu machen.

EDIT2: Ich verwende jQuery, bin aber völlig neu darin und wusste nicht, dass es in dieser Situation helfen könnte.

javascript jquery html dom hyperlink Xavier
quelle
Laden Sie den RSS-Feed mit jQuery oder etwas anderem (Mootools, Dojo, Atlas usw.)? Wenn Sie versuchen, Ankertags dynamisch basierend auf einer RSS-Liste eines Drittanbieters zu erstellen, die beim Laden der Seite erfasst wurde, würde ich empfehlen, die jQuery-Bibliothek oder eine andere zu verwenden, um das Element hinzuzufügen. Die Details in diesem Fall sind wichtig, um zu wissen, was zu tun ist. DOM-Methoden sind jedoch eine nützliche Illustration.
Jared Farrish
Versuchen Sie diesen Link Ich denke, es kann von Vorteil sein
Yitzhak Weinberg

Antworten:

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
quelle
1
Dies ist ein sehr allgemeines Beispiel für die Verwendung von DOM-Methoden zum Hinzufügen eines Ankertags zu einer Seite. Beispielsweise kann die appendChild-Methode ein Listenelement, ein TD oder ein anderes Element innerhalb der Seite sein. Siehe: quirksmode.org
Jared Farrish
5
@ Nadu - Bitte hör auf meine Antwort zu bearbeiten. Wenn Sie möchten, dass eine bestimmte Sache gesagt wird, fügen Sie eine eigene hinzu. Wenn es nicht "anders" genug ist, um es zu rechtfertigen, ist es nicht anders genug, um eine Bearbeitung zu rechtfertigen.
Jared Farrish
plnkr.co/edit/mV7nOBIHa6hMNaVIPG75?p=preview Ich habe ein Plunker-Beispiel erstellt.
Harold Castillo
61

Mit JavaScript

  1. 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);
  2. document.getElementsByTagName('body')[0].innerHTML += '<a href="'+desiredLink+'">'+desiredText+'</a>';

    oder, wie von @travis vorgeschlagen :

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

Mit JQuery

  1. $('<a href="'+desiredLink+'">'+desiredText+'</a>').appendTo($('body'));
  2. $('body').append($('<a href="'+desiredLink+'">'+desiredText+'</a>'));
  3. var a = $('<a />');
a.attr('href',desiredLink);
a.text(desiredText);
$('body').append(a);

In allen obigen Beispielen können Sie den Anker an jedes Element anhängen, nicht nur an den 'Körper'. Dies desiredLinkist eine Variable, die die Adresse enthält, auf die Ihr Ankerelement zeigt, und desiredTexteine Variable, die den Text enthält, in dem angezeigt wird das Ankerelement.

gion_13
quelle
3
Ich denke, das einzige, was Sie ausgelassen haben, ist:document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);
Travis
1
Um XSS zu vermeiden, sollten Sie die Verkettung von Zeichenfolgen ( +) und .innerHTMLbeim Erstellen von HTML vermeiden . Mit jQuery .attr("href", desiredLink)und genau das, .text(desiredText)was Sie hier wollen.
Wes Turner
15

Erstellen Sie Links mit JavaScript:

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

ODER

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

ODER

<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
quelle
12

Es gibt verschiedene Möglichkeiten:

Wenn Sie rohes Javascript verwenden möchten (ohne einen Helfer wie JQuery), können Sie Folgendes tun:

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

Die andere Methode besteht darin, den Link direkt in das Dokument zu schreiben:

document.write("<a href='" + link + "'>" + text + "</a>");
Roopinder
quelle
Ich mag die erste Option definitiv besser. +1 dafür, aber das Mischen von JS und HTML mischt Inhalt und Verhalten, die getrennt sein sollten. Übertrieben, das kann zu einem Wartungsalptraum führen.
jmort253
Ich bevorzuge auch die erste Option, verwende aber möglicherweise JQuery, um den gleichen Effekt zu erzielen (aus Gründen der Lesbarkeit und Wartungsfreundlichkeit).
Roopinder
1
Sie sollten wahrscheinlich vermeiden, 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>
Erweitern Sie das Snippet

  1. Das 'Ankerobjekt' hat seine eigenen * (geerbten) * Eigenschaften zum Festlegen des Links, seines Textes. Also benutze sie einfach. .setAttribute ist allgemeiner, wird aber normalerweise nicht benötigt. a.title ="Blah"wird das gleiche tun und ist klarer! Nun, eine Situation, die .setAttribute erfordert, ist folgende:var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")

  2. Lassen Sie das Protokoll offen. Anstelle von http: //example.com/path sollten Sie auch //example.com/path verwenden. Überprüfen Sie, ob auf example.com sowohl über http: als auch über https: zugegriffen werden kann. 95% der Websites funktionieren jedoch auf beiden.

  3. OffTopic: Das ist nicht wirklich relevant für das Erstellen von Links in JS, aber vielleicht gut zu wissen: Manchmal, wie in der Chromes-Dev-Konsole, können Sie$("body")anstelle vondocument.querySelector("body")A_$ = document.querySelectorIhre Bemühungen mit einem illegalen Aufruffehler"ehren",wenn Sie es zum ersten Mal verwenden. Das liegt daran, dass die Zuweisung nur .querySelector 'greift'(ein Verweis auf die Klassenmethode ). Mit.bind(...Ihnen auch den Kontext einbeziehen werden (hier ist esdocument)und Sie eine bekommen Objektmethode, wie Sie es vielleicht erwarten wird funktionieren.

Nadu
quelle
3

Erstellen Sie dynamisch einen Hyperlink mit rohem JavaScript:

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

   document.body.appendChild(anchorElem); // append your new link to the body
jmort253
quelle
Verwenden Sie `anchorElem.text = yourLinkText; `anstelle von innerHTML wird das klarer. Und ja, überlegen Sie, was passieren wird, wenn Ihr LinkText vielleicht "<- das ist cool!" Ist.
Nadu
-4

Sie fügen dies ein:

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

Zerodunwash
quelle
Das OP fordert ausdrücklich auf, einen Link mit JavaScript (nicht HTML) zu erstellen!
Hatef