Cómo crear un enlace usando JavaScript?
¿Por qué necesitas crear enlaces con JavaScript?
HTML le permite colocar enlaces dentro de la etiqueta de anclaje debajo del atributo HREF. Sin embargo, al desarrollar una aplicación basada en JavaScript donde debe manejar todo programáticamente, debe crear enlaces dinámicamente y asignarlos al atributo HREF de la etiqueta de anclaje HTML.
Esta es la razón principal por la que necesita JavaScript para crear un enlace y esto es de lo que vamos a hablar en este artículo, así que tengamos una inmersión profunda en cómo podemos crear fácilmente un enlace usando JavaScript.
Enfoque para crear un enlace
Para crear un enlace mediante programación, primero entendemos exactamente lo que necesitamos hacer.
Primero, necesitamos crear una etiqueta de anclaje usando JavaScript:
Crear una etiqueta de anclaje
Para crear un ancla, podemos utilizar el código proporcionado a continuación. Cree un elemento (etiqueta) y asigna a la variable llamada "Anchor" como lo necesitaremos más adelante:
Después de crear la etiqueta de anclaje, necesitamos escribir algún texto dentro de la etiqueta como se demuestra a continuación:
Sitio web de LinuxhintEscribir texto en la etiqueta
Para escribir algún texto dentro de la etiqueta, primero cree un nodo de texto y luego agregue ese nodo de texto como niño a la etiqueta de anclaje. El código para escribir texto en la etiqueta de anclaje irá así:
Dejar textNode = documento.CreateTextNode ("Sitio web de LinuxHint");
// Agregar el nodo text cuando era niño para anclar.
ancla.appendChild (textNode);
En esta etapa, el texto se adjunta en la etiqueta de anclaje. Ahora, necesitamos colocar el enlace en el atributo href de la etiqueta de anclaje como se muestra a continuación.
Sitio web de LinuxhintEstablezca el atributo href de la etiqueta
Para poner el enlace en el atributo HREF de la etiqueta, se utilizará la siguiente línea de código JavaScript:
Después de establecer el href atributo, lo único que queda es agregar la etiqueta donde queremos que se ponga.
Agregue la etiqueta al cuerpo HTML
Para agregar la etiqueta de anclaje al cuerpo, use la siguiente línea de código.
Muy bien, ha aprendido todo el procedimiento para crear un enlace usando JavaScript. Pasemos por un ejemplo para demostrar los resultados.
Ejemplo
Tomemos un ejemplo simple en el que simplemente crearemos un enlace y lo agregaremos al cuerpo HTML y verificaremos el comportamiento del enlace si está funcionando o no.
Html
Primero, crearemos un botón y con el clic de ese botón se llamará al método CreateLink ().
Javascript
Todo el código para crear el enlace se escribirá dentro del crear enlace() función y todo el código JavaScript irá así:
Dejar ancla = documento.createElement ('a');
Let Link = documento.CreateTextNode ("Sitio web de LinuxHint");
ancla.appendChild (enlace);
ancla.href = "https: // linuxhint.com/";
documento.cuerpo.appendchild (ancla);
Una vez que todo esté en orden y listo para ser ejecutado, verifiquemos esto y ejecute el código.
Producción
Haga clic en el botón y vea si realmente está creando el enlace para nosotros o no.
Aquí en la pantalla anterior, puede ver que después de hacer clic en el botón, el enlace se creó correctamente y se muestra en nuestra página web. Este enlace ha renunciado a la dirección de Linuxhint.com, lo que significa que si hace clic en él, se le dirigirá a Linuxhint.comunicarse.
Recuerde que hemos agregado el enlace en nuestro código JavaScript, por eso aparece debajo de todo. Entonces, ahora, si desea preparar el enlace a la parte superior de algún elemento HTML o en la parte superior de la página, simplemente prependa la etiqueta de anclaje en lugar de agregarlo al cuerpo para lograr este objetivo.
Preparar la etiqueta
El único cambio que necesitamos es usar "documento.cuerpo.prepender " en lugar de "documento.cuerpo.adjuntar" Para prever la etiqueta de anclaje en la parte superior de la página sobre cada elemento.
Producción
Como puede ver anteriormente, el enlace se preparó en la parte superior de cada elemento HTML y se puede hacer clic con la dirección adjunta.
Conclusión
El enlace se puede crear fácilmente a través de JavaScript creando primero una etiqueta usando el método createElement () y luego el enlace se puede adjuntar al atributo HREF de la etiqueta. Esta publicación ha proporcionado la función completa para crear un enlace totalmente a través de JavaScript sin tocar el HTML. Además, hemos discutido cómo agregar o preparar la etiqueta de anclaje "" al cuerpo utilizando ejemplos detallados.