¿Cómo creo un enlace usando javascript?

128

Tengo una cadena para un título y una cadena para un enlace. No estoy seguro de cómo juntar los dos para crear un enlace en una página usando Javascript. Cualquier ayuda es apreciada.

EDITAR1: Agregar más detalles a la pregunta. La razón por la que estoy tratando de resolver esto es porque tengo una fuente RSS y tengo una lista de títulos y URL. Me gustaría vincular los títulos a la URL para que la página sea útil.

EDIT2: Estoy usando jQuery pero soy completamente nuevo y no sabía que podría ayudar en esta situación.

— Javier
fuente

¿Estás cargando el feed RSS con jQuery o algo así (Mootools, Dojo, Atlas, etc.)? Si está tratando de crear dinámicamente etiquetas de anclaje basadas en una lista RSS de terceros adquirida en la carga de la página, sugeriría usar la biblioteca jQuery u otra para agregar el elemento. Los detalles en este caso son importantes para saber lo que hay que hacer. Sin embargo, los métodos DOM son una ilustración útil.

— Jared Farrish el

prueba este enlace , creo que puede ser beneficioso

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

1

Este es un ejemplo muy genérico del uso de métodos DOM para agregar una etiqueta de anclaje a una página. Por ejemplo, el método appendChild podría ser un elemento de lista, TD u otro elemento dentro de la página. Ver: quirksmode.org

— Jared Farrish el

55

@ Nadu - Por favor, deja de editar mi respuesta. Si desea que se diga algo específico, agregue uno propio; Si no es lo suficientemente "diferente" como para justificarlo, no es lo suficientemente diferente como para garantizar una edición.

— Jared Farrish

plnkr.co/edit/mV7nOBIHa6hMNaVIPG75?p=preview He creado un ejemplo de 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>';

o, como lo sugiere @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);

En todos los ejemplos anteriores, puede agregar el ancla a cualquier elemento, no solo al 'cuerpo', y desiredLinkes una variable que contiene la dirección a la que apunta su elemento de anclaje, y desiredTextes una variable que contiene el texto que se mostrará en El elemento de anclaje.

— gion_13
fuente

3

Creo que el único que dejó fuera es:document.getElementsByTagName('body')[0].innerHTML += desiredText.link(desiredLink);

— travis

1

Para evitar XSS, debe evitar la concatenación de cadenas ( +) y .innerHTMLal compilar HTML. Con jQuery, .attr("href", desiredLink)y .text(desiredText)son lo que quieres aquí.

— Wes Turner

15

Crear enlaces usando 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
fuente

12

Hay un par de maneras:

Si desea utilizar Javascript sin formato (sin un ayudante como JQuery), puede hacer algo como:

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

El otro método es escribir el enlace directamente en el documento:

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

— Roopinder
fuente

Definitivamente me gusta más la primera opción. +1 para eso, pero mezclar JS y HTML mezcla contenido y comportamiento, que deberían estar separados. Exagerado, eso puede conducir a una pesadilla de mantenimiento.

— jmort253

También tiendo a preferir la primera opción, pero tal vez use JQuery para lograr el mismo efecto (para facilitar la lectura y facilitar el mantenimiento).

— Roopinder

1

Probablemente debería evitar usar 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>

Expandir fragmento

El 'Objeto de anclaje' tiene sus propias propiedades * (heredadas) * para configurar el enlace, su texto. Así que solo úsalos. .setAttribute es más general, pero normalmente no lo necesita. a.title ="Blah"hará lo mismo y queda más claro! Bueno, una situación que exigirá .setAttribute es esta:var myAttrib = "title"; a.setAttribute( myAttrib , "Blah")
Deje el protocolo abierto. En lugar de http: //example.com/path, considere usar //example.com/path. Compruebe si se puede acceder a example.com por http: así como por https: pero el 95% de los sitios funcionarán en ambos.
OffTopic: Eso no es realmente relevante sobre la creación de enlaces en JS, pero tal vez sea bueno saberlo: bueno, a veces, como en la consola de desarrollo de chromes que puede usar en$("body")lugar dedocument.querySelector("body")A_$ = document.querySelector, 'honrará' sus esfuerzos con unerror de invocación ilegal la primera vez que lo use. Esto se debe a que la tarea simplemente 'toma' .querySelector (una referencia al método de clase ). Con.bind(...también involucrará el contexto (aquí estádocument) y obtendrá unmétodo de objeto que funcionará como podría esperar.

— Nadu
fuente

3

Cree dinámicamente un hipervínculo con JavaScript sin formato:

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

   document.body.appendChild(anchorElem); // append your new link to the body

— jmort253
fuente

Use `anchorElem.text = yourLinkText; `en lugar de innerHTML eso será más claro. Y sí, considere lo que sucederá si yourLinkText es quizás "<- ¡eso es genial!"

— Nadu

-4

Pegas esto dentro:

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

— zerodunwash
fuente

¡El OP está pidiendo explícitamente crear un enlace con JavaScript (no HTML)!

— hatef