Modificar un enlace con Javascript

Los enlaces son esos amigos que no pueden faltar en una página web, pero ¿y si hubiese un enlace que quisiéramos modificar?.

Ya sea que haya un enlace que no puedas modificar porque no tengas acceso al código de la página o cualquier otra razón, modificar un enlace puede resultar útil en más de una forma.

Gracias a Javascript, es posible sin recargar la página utilizando href e innerText, y no se requiere ser un maestro del desarrollo web para poder lograrlo, sólo basta un poco de lógica y seguir correctamente este tutorial.

1. Identificar el enlace

Primero, se requiere de algo con que identificar el enlace, darle a entender al script que enlace queremos modificar.
Ejemplo #1: su ID
<a id="test" href="http://google.com"></a>En el primer ejemplo nos encontramos con un enlace cuyo ID es test y su url es http://google.com para editarlo bastaría con utilizar su ID para identificarlo de la siguiente manera:
var enlace = document.getElementById("test");
enlace.href = "http://NuevaURL";
enlace.innerText = "Nuevo Texto";

Ejemplo #2: su Class
<a class="test" href="http://google.com"></a>En el segundo nos encontramos con un enlace que no tiene un ID, pero en su lugar tiene un Class con el que podemos identificarlo de la siguiente manera:
var enlace = document.querySelector('.test');
enlace.href = "http://NuevaURL";
enlace.innerText = "Nuevo Texto";

Ejemplo #3: ¿qué hacer si no tiene ni ID ni Class?
<a title="test" href="http://google.com"></a>Este ultimo es más complicado pero no imposible, si no hay ni ID ni Class se puede usar algún otro atributo, por ejemplo en titulo (title) e inclusive el enlace mismo. De la siguiente manera:
var enlace = document.querySelector('a[title="test"]');
enlace.href = "http://NuevaURL";
enlace.innerText = "Nuevo Texto";
O por el enlace
var enlace = document.querySelector('a[href*="http://google.com"]');
enlace.href = "http://NuevaURL";
enlace.innerText = "Nuevo Texto";

Demo


Enlace de prueba

Código de la demo

<!-- Creamos un formulario -->
<form name="linkform" method="post">
<input type="text" id="contentform" placeholder="Contenido de el enlace..."></input>
<input type="text" id="urlform" value="http://"></input><br>
<input onclick="modify()" type="button" value="Aceptar" />
</form>

<!-- Y un enlace a modificar -->
<a id="link" target="_blank" href="#">Enlace de prueba</a>
<script>
//creamos la función "modify"
function modify() {
//Ingresamos el ID del enlace, en este caso es "Link"
var linkto = document.getElementById("link");
//Ingresamos el enlace, en este caso el que pongan en el formulario
linkto.href = document.linkform.urlform.value;
//Ingresamos un texto, en este caso el que pongan en el formulario
linkto.innerText = document.linkform.contentform.value;
}
</script>