静态Html 使用JavaScript 修改 href 值

html javascript js href

1. 背景

日常工作中常用的一些链接希望通过静态 html 的形式整理保存，方便使用。其中有一个小要求就是这些链接中的ip 是动态拼接的，每次都会变化，需要手动输入。首先想到就是写一个简单的form 表单输入这个动态的ip，然后增加一个提交的JavaScript 方法把页面中所有的 href 的值修改一遍。

但是前端知识实在是匮乏，折腾了好久都没有搞定。于是各种百度、google ，终于搞到了一个比较笨拙的方法，实现了想要的效果，这里记录一下实现的方法。

2. 简单示例实现

HTML 代码部分：

<input type="button" value = "修改“ id="btn"/>
<a id="test" href="http://www.baidu.com" target="_blank">百度</a>

JS 部分代码：

<script>
    document.getElementById("btn").onclick = function(){
        var aObj = document.getElementById("test");
        aObj.href = "https://www.google.com/";
        aObj.innerText = "google";
};
</script>

参考文档：

• JS 修改a标签中的链接及文字