Comment créer un lien en javascript?

128

J'ai une chaîne pour un titre et une chaîne pour un lien. Je ne sais pas comment mettre les deux ensemble pour créer un lien sur une page en utilisant 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 que j'ai un flux RSS et une liste de titres et d'URL. Je voudrais lier les titres à l'URL pour rendre la page utile.

EDIT2: J'utilise jQuery mais je suis complètement nouveau et je ne savais pas que cela pourrait aider dans cette situation.

— Xavier
source

Chargez-vous le flux RSS avec jQuery ou quelque chose (Mootools, Dojo, Atlas, etc ...)? Si vous essayez de créer dynamiquement des balises d'ancrage basées sur une liste RSS tierce acquise lors du chargement de la page, je vous suggère d'utiliser la bibliothèque jQuery ou autre pour ajouter l'élément. Les détails dans ce cas sont importants pour savoir ce qui doit être fait. Cependant, les méthodes DOM sont une illustration utile.

— Jared Farrish

essayez ce lien je pense que cela peut être bénéfique

— 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
source

1

Ceci est un exemple très générique d'utilisation des méthodes DOM pour ajouter une balise d'ancrage à une page. Par exemple, la méthode appendChild peut être un élément de liste, un TD ou un autre élément de la page. Voir: quirksmode.org

— Jared Farrish

5

@Nadu - Veuillez arrêter de modifier ma réponse. Si vous voulez qu'une chose spécifique soit dite, ajoutez la vôtre; si ce n'est pas suffisamment «différent» pour le justifier, ce n'est pas assez différent pour justifier une modification.

— Jared Farrish

plnkr.co/edit/mV7nOBIHa6hMNaVIPG75?p=preview J'ai été créé un exemple de plunker.

— Harold Castillo

61

Avec 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, comme suggéré par @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>

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

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

— gion_13
source

3

Je pense que le seul que vous avez document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

— oublié

1

Afin d'éviter XSS, vous devez éviter la concaténation de chaînes ( +) et .innerHTMLlors de la construction de HTML. Avec jQuery, .attr("href", desiredLink)et .text(desiredText)c'est ce que vous voulez ici.

— Wes Turner

15

Créez des liens à l'aide de 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
source

12

Il y a plusieurs façons:

Si vous souhaitez utiliser du Javascript brut (sans aide 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>");

— Roopinder
source

J'aime vraiment mieux la première option. +1 pour cela, mais mélanger JS et HTML mélange le contenu et le comportement, qui devraient être séparés. Exagéré, cela peut conduire à un cauchemar de maintenance.

— jmort253

J'ai tendance à préférer également la première option, mais peut-être en utilisant JQuery pour obtenir le même effet (pour la lisibilité et la facilité de maintenance).

— Roopinder

1

Vous devriez probablement éviter d'utiliser 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>

Développer l'extrait

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 c'est plus clair! Eh bien, une situation qui exigera .setAttribute est la suivante:var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")
Laissez le protocole ouvert. Au lieu de http: //example.com/path, envisagez d'utiliser simplement //example.com/path. Vérifiez si example.com est accessible par http: ainsi que par https: mais 95% des sites fonctionneront sur les deux.
OffTopic: Ce n'est pas vraiment pertinent à propos de la création de liens dans JS mais peut-être bon à savoir: Eh bien, parfois, comme dans la console de développement chromes, vous pouvez utiliser à la$("body")place dedocument.querySelector("body")A_$ = document.querySelector"honorera" vos efforts avec uneerreur d' invocation illégale la première fois que vous l'utiliserez. C'est parce que l'affectation «saisit» simplement .querySelector (une référence à la méthode de classe ). Avec.bind(...vous impliquerez également le contexte (ici c'estdocument) et vous obtiendrez uneméthode objet qui fonctionnera comme vous pourriez vous y attendre.

— Nadu
source

3

Créez dynamiquement un lien hypertexte avec 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

— jmort253
source

Utilisez `anchorElem.text = yourLinkText; `au lieu de innerHTML, ce sera plus clair. Et oui, pensez à ce qui se passera si yourLinkText est peut-être "<- c'est cool!"

— Nadu

-4

Vous collez ceci à l'intérieur:

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

— zerodunwash
source

L'OP demande explicitement de créer un lien avec JavaScript (pas HTML)!

— haine