Sabemos cómo configurar el atributo href de la etiqueta de anclaje int HTML , pero a veces es posible que necesitemos configurar el atributo href en tiempo de ejecución, por ejemplo, cuando un usuario nos proporciona una URL y queremos configurarlo en tiempo de ejecución. Podemos hacer esto con la ayuda de jQuery .
Ejemplo 1: en este ejemplo, usando jquery, configuramos el método attr() en la URL ingresada por el usuario en la etiqueta de entrada, cuando el usuario hace clic en el botón establecer href.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src=
"https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<title>Set href attribute at runtime</title>
<style>
#btn {
background-color: #4caf50;
color: white;
}
input {
color: #4caf50;
}
a {
color: #4caf50;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<b>Set href attribute at runtime</b>
<br>
<input type="text" name="url" />
<button id="btn">Set href</button>
<button>
<a id="click" href="#"
target="_blank">
link
</a>
</button>
</center>
</body>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("#click").attr("href",
$('input[name$="url"]').val());
});
});
</script>
</html>
Producción:
Ejemplo 2: En este ejemplo, reemplazamos la etiqueta de ancla en el ‘enlace’ div con otra etiqueta de ancla para cambiar el valor href . Esta es otra forma en la que podemos cambiar el valor del atributo href .
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible"
content="ie=edge" />
<script src=
"https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<title>Set href attribute at runtime</title>
<style>
#btn {
background-color: #4caf50;
color: white;
}
input {
color: #4caf50;
}
a {
color: #4caf50;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<b>Set href attribute at runtime</b>
<br>
<div id="link">
<a id="click" href=
"https://practice.geeksforgeeks.org/"
target="_blank">
https://practice.geeksforgeeks.org/
</a>
<button id="btn">Change url</button>
</div>
</center>
</body>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("#link").html(
"<a href='https://www.geeksforgeeks.org/'>
https://www.geeksforgeeks.org</a>");
alert("Url changed to https://www.geeksforgeeks.org/");
});
});
</script>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por parasmadan15 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA