Home >Web Front-end >JS Tutorial >Change href value of tag after clicking button via JavaScript
Change href value of tag after clicking button via JavaScript
- 藏色散人Original
- 2021-08-31 10:23:222545browse
In the previous article "How to use jQuery to animate paragraph elements", I introduced how to use jQuery to animate paragraph elements. Interested friends can read and learn more~
This article will introduce to you how to change the href value of the 3499910bf9dac5ae3c52d5ede7383485 tag after clicking the button through JavaScript.
We will inevitably encounter such requirements in our daily development process, so don’t miss this article~
The following are two implementation methods:
The first method
The code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="text-align:center;">
<h1 style="color:#ff311f">
PHP中文网
</h1>
<h3>
更改href属性值
</h3>
<a href="https://www.baidu.com/">
Go to 百度！
</a>
<br><br>
<button onclick="myFunction()">
点击更改跳转链接
</button>
<script type="text/javascript">
function myFunction() {
var link = document.querySelector("a");
link.getAttribute("href");
link.setAttribute("href",
"https://www.php.cn/");
link.textContent = "欢迎来到PHP中文网！";
}
</script>
</body>
</html>The effect is as follows:
The second method
The code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="text-align:center;">
<h1 style="color:#ff7a03">
PHP中文网
</h1>
<h3>
更改href属性值
</h3>
<a href="https://www.baidu.com" id="myLink">
Go to 百度
</a>
<br><br>
<button onclick="myFunction()">
点击更改跳转链接
</button>
<script type="text/javascript">
function myFunction() {
document.getElementById('myLink').href
="https://www.php.cn";
document.getElementById("myLink")
.textContent = "欢迎来到PHP中文网！";
}
</script>
</body>
</html>The effect is as follows:
- document.querySelector() method: It returns the first element that matches the query.
- document.querySelectorAll() method: It returns all elements that match the query.
- document.getElementById() method: It returns an element matching id.
- document.getElementsByClassName() method: Returns all elements matching the class.
- document.getElementsByTagName() method: It returns a list of elements matching the tag name.
- getAttribute() method: It returns the current value of an attribute on the element. If the specified attribute does not exist on the element, Returns null.
- setAttribute() method: It updates the value of an existing attribute on the specified element, otherwise adds a new attribute with the specified name and value.
- removeAttribute() method: used to remove the attribute of the specified element.
JavaScript Basics Tutorial" ~ Welcome everyone to learn ~
The above is the detailed content of Change href value of tag after clicking button via JavaScript. For more information, please follow other related articles on the PHP Chinese website!