方法1: getElementByIdを使用する方法
<!DOCTYPE html>
<html>
<body>
<a id="myLink">リンク</a>
<script>
// リンクの要素を取得
var link = document.getElementById("myLink");
// "href"属性を動的に追加
link.href = "https://example.com";
</script>
</body>
</html>この方法では、getElementByIdを使用してリンクの要素を取得し、href属性に値を設定します。
方法2: querySelectorを使用する方法
<!DOCTYPE html>
<html>
<body>
<a id="myLink">リンク</a>
<script>
// リンクの要素を取得
var link = document.querySelector("#myLink");
// "href"属性を動的に追加
link.href = "https://example.com";
</script>
</body>
</html>この方法では、querySelectorを使用してリンクの要素を取得し、href属性に値を設定します。CSSセレクタを使用して要素を指定できるため、より柔軟な選択が可能です。
方法3: createAttributeとsetAttributeを使用する方法
<!DOCTYPE html>
<html>
<body>
<a id="myLink">リンク</a>
<script>
// リンクの要素を取得
var link = document.getElementById("myLink");
// "href"属性の属性ノードを作成
var hrefAttribute = document.createAttribute("href");
// 属性ノードに値を設定
hrefAttribute.value = "https://example.com";
// 属性ノードをリンクに設定
link.setAttributeNode(hrefAttribute);
</script>
</body>
</html>この方法では、createAttributeを使用して新しい属性ノードを作成し、setAttributeNodeを使用してリンクに属性ノードを設定します。これにより、他の属性と同様に属性を追加できます。
これらの方法を使用すると、JavaScriptを介してリンクの「href」属性を動的に追加することができます。適切な方法を選択し、必要に応じてコードをカスタマイズしてください。