web-dev-qa-db-fra.com

Comment créer un lien en javascript?

J'ai une chaîne pour un titre et une chaîne pour un lien. Je ne suis pas sûr de savoir comment réunir les deux pour créer un lien sur une page à l'aide de Javascript. Toute aide est appréciée.

EDIT1: Ajout de plus de détails à la question. La raison pour laquelle j'essaie de comprendre cela est parce que j'ai un flux RSS et une liste de titres et d'URL. J'aimerais lier les titres à l'URL pour rendre la page utile.

EDIT2: J'utilise jQuery mais je suis tout à fait nouveau et je ne savais pas que cela pourrait aider dans cette situation.

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

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

    ou, comme suggéré par @ travis :

    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>

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

Dans tous les exemples ci-dessus, vous pouvez ajouter l’ancre à n’importe quel élément, pas seulement au 'corps', et desiredLink est une variable qui contient l’adresse vers laquelle pointe votre élément d’ancrage, et desiredText est un variable qui contient le texte qui sera affiché dans l'élément d'ancrage.

55
gion_13

Créer des liens en utilisant 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>
15
Naveed

Il y a deux manières:

Si vous voulez utiliser du Javascript brut (sans assistant comme JQuery), vous pouvez faire quelque chose comme:

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'autre méthode consiste à écrire le lien directement dans le document:

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. L'objet d'ancrage a ses propres propriétés * (héritées) * pour définir le lien, son texte. Alors utilisez-les simplement. . setAttribute est plus général mais vous n'en avez normalement pas besoin. a.title ="Blah" fera de même et sera plus clair! Eh bien, une situation qui demandera . SetAttribute est la suivante: var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")

  2. Laissez le protocole ouvert. Au lieu de http: // example.com/path, utilisez simplement //example.com/path. Vérifiez si example.com est accessible par http: ainsi que https: mais 95% des sites fonctionneront sur les deux.

  3. OffTopic: Ce n'est pas vraiment important de créer des liens dans JS mais peut-être bon à savoir: Eh bien parfois comme dans la console de jeu chromes, vous pouvez utiliser $("body") au lieu de document.querySelector("body") Un _$ = document.querySelectorwill 'honorer' vos efforts avec une erreur Invocation illégale la première fois que vous l'utilisez. En effet, l’affectation vient "saisir" . QuerySelector (une référence à la méthode class). Avec .bind(..., vous impliquerez également le contexte (ici, document) et vous obtiendrez une méthode object qui fonctionnera comme prévu.

4
Nadu

Créez dynamiquement un lien hypertexte avec du code JavaScript brut:

   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