wake-up-neo.net

Wie erstelle ich einen Link mit Javascript?

Ich habe eine Zeichenfolge für einen Titel und eine Zeichenfolge für einen Link. Ich bin 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: Der Frage mehr Details hinzufügen. Der Grund, warum ich das herausfinden will, ist, dass ich einen RSS-Feed und eine Liste von Titeln und URLs habe. Ich möchte die Titel mit der URL verknüpfen, um die Seite nützlich zu machen.

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

javascriptjqueryhtmldomhyperlink
111
Xavier
<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>
211
Jared Farrish

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 'body', und desiredLink ist eine Variable, die die Adresse enthält, auf die Ihr Ankerelement zeigt, und desiredText. ist eine Variable, die den Text enthält, der im Ankerelement angezeigt wird.

55
gion_13

Links mit JavaScript erstellen:

<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>
15
Naveed

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>");
11
Roopinder
    <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>

  1. Das 'Ankerobjekt' hat seine eigenen * (geerbten) * Eigenschaften zum Setzen des Links, seines Texts. Also benutze sie einfach. . setAttribute ist allgemeiner, wird aber normalerweise nicht benötigt. a.title ="Blah" macht dasselbe und ist klarer! Nun, eine Situation, die .setAttribute verlangt, ist diese: var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")

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

  3. OffTopic: Das ist nicht wirklich relevant für das Erstellen von Links in JS, aber vielleicht gut zu wissen: Na ja, manchmal wie in den Chromes-Entwicklern. Konsole können Sie $("body") anstelle von document.querySelector("body") verwenden. Ein _$ = document.querySelector "honoriert" Ihre Bemühungen mit einem Illegalen Aufruf Fehler, wenn Sie ihn zum ersten Mal verwenden. Das liegt daran, dass die Zuweisung nur 'greift' . QuerySelector (ein Verweis auf die Klasse -Methode). Mit .bind(... beziehen Sie auch den Kontext ein (hier ist es document) und Sie erhalten eine Objekt -Methode, die wie erwartet funktioniert.

4
Nadu

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
3
jmort253