Change href value of <a> tag after clicking button via JavaScript-JS Tutorial-php.cn

Change href value of tag after clicking button via JavaScript

藏色散人

Release： 2021-08-31 10:24:51

Original

2514 people have browsed it

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 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>

Copy after login

The effect is as follows:

GIF 2021-8-31 星期二上午 10-16-44.gif

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(&#39;myLink&#39;).href
            ="https://www.php.cn";

        document.getElementById("myLink")
            .textContent = "欢迎来到PHP中文网！";
    }
</script>
</body>

</html>

Copy after login

The effect is as follows:

GIF 2021-8-31 星期二上午 10-19-50.gif

##Related introduction:

Through five ways Select elements:

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.

DOM allows attribute manipulation. Attributes control the behavior of an HTML tag or provide additional information about the tag. JavaScript provides a variety of methods for manipulating the attributes of HTML elements.

The following methods are used to operate attributes:

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.

Finally, I would like to recommend "

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!