aタグ内のhref属性にjsファイルで定義した変数を含める方法

html
1<a href="https://example.com">

javascript
1var id = 123456789;

https://example.com/123456789/

上記の飛び先をHTMLファイルで指定したいんですが、どうすれば良いでしょうか？
JSで処理したいです！

行動規範の内容に同意します

回答2件

以下のように行ってはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6</head>
7<body>
8<a href="https://example.com" id="anchor1">テキスト</a>
9<script>
10    var id = 123456789;
11    document.addEventListener("DOMContentLoaded", function () {
12        document.getElementById("anchor1").setAttribute("href", document.getElementById("anchor1").getAttribute("href") + "/" + id + "/");
13    }, false);
14</script>
15</body>
16</html>

投稿2017/04/21 12:25

s8_chu

総合スコア14731

ベストアンサー

簡単なのは

html
1  <script>
2    var id = 123456789;
3    function jump(){
4      window.location.href='https://example.com/'+id+'/';
5    }
6  </script>
7  <a href="javascript:void(0);" onclick="jump();">hoge</a>

とか

html
1  <script>
2    var id = 123456789;
3  </script>
4  <a href="javascript:window.location.href='https://example.com/'+id+'/';">hoge</a>

ですかね。

a要素をいじりたくないなら、私ならjQueryを使って下記のように書きたいです。

html
1 <script src='jquery.min.js'></script>
2  <script>
3    var id = 123456789;
4    $(function(){
5      var baseurl = $('a[href="https://example.com"]').attr('href');
6      $('a[href="https://example.com"]').attr('href', baseurl + '/' + id + '/');
7    });
8  </script>
9  <a href="https://example.com">hoge</a>