Modificar los enlaces con JavaScript

Los enlaces también están dentro del modelo DOM de una página. Es por ello que mediante lenguaje Javascript podremos modificar sus atributos: el contenido, el target asignado, así como la URL a la que enlazan.

Mediante este ejemplo vamos a componer un formulario que nos permita crearnos nuestro enlace personalizado. De tal manera que elijamos el texto del enlace, la URL a la cual va a acceder, si se abrirá en una nueva ventana, en un frame o en la misma,… es decir, rellenaremos datos para poder modificar todos los valores de los atributos del enlace.

Crear el formulario

Lo primero será crear nuestro formulario:

<form action="#">
  <label for="enlace">URL: </label>
  <input id="enlace" type="text"></input>

  <label for="texto">Texto: </label>
  <input id="texto" type="text"></input>

  <label for="destino">Target: </label>
  <select id="destino">
    <option value="_blank">Nueva Ventana</option>
    <option value="_self">Misma ventana</option>
    <option value="_parent">Ventana Padre</option>
    <option value="_top">Top</option>
  </select>
</form>

Como cosa particular vemos que las opciones del destino del enlace se las presentamos mediante un combo. Las opciones son:

• _blank, para abrir una nueva ventana.
• _self, para abrirlo en la misma ventana.
• _parent, abre en la ventana padre.
• _top, abre eliminando todos los frames que pueda haber en la ventana.

Enviar el formulario

Cuando se envíe el formulario obtenemos todos los valores para pasárselos a un método lenguaje Javascript que llamaremos modificar:

<input type="button" value="Modificar Enlace" onClick="modificar(enlace.value,texto.value,destino.value);">

Además tendremos un enlace con valores por defecto dentro de nuestra página. Este será el enlace que vayamos modificando.

<a id="mienlace" href="[https://lineadecodigo.com">Línea](https://lineadecodigo.com/%22%3ELínea) de Código</a>

Codificar el método JavaScript

Ahora pasamos a codificar el método lenguaje Javascript. Lo primero que tenemos que hacer es acceder al enlace. Para ello nos apoyamos en el método getElementById, al cual le pasamos el ID que le hayamos dado al enlace de nuestra página.

Los atributos que podemos modificar del elemento son los siguientes:

• innerHTML, nos permite modificar el texto del enlace.
• href, modifica la URL de destino del enlace.
• target, representa el destino del enlace.

El código nos quedaría de la siguiente forma:

function modificar(url, texto, destino) {
  var enlace = document.getElementById('mienlace');
  enlace.innerHTML = texto;
  enlace.href = url;
  [enlace.target](http://enlace.target/) = destino;
}