JavaScriptでaタグのテキストを変更する方法まとめ

javascript aタグテキスト変更

aタグのテキストをJavaScriptで変更する方法について、innerText、textContent、innerHTMLの違いを交えながら、サンプルコードと具体的な活用シーンを交えて解説します。初心者の方でも分かりやすいよう丁寧に解説していくので、ぜひ参考にしてみてください。

aタグのテキスト変更とは？

ウェブページ上で動的にリンクテキストを変更したい場合に利用
例：ボタンクリックでリンク先を変更する、ユーザー名を表示するなど

JavaScriptでaタグのテキストを変更する3つの方法

innerTextプロパティ

タグ内のテキストのみを変更
HTMLタグは無視される
表示上の空白は保持される

サンプルコード：


<a id="myLink" href="#">リンクテキスト</a>
<script>
const linkElement = document.getElementById('myLink');
linkElement.innerText = '新しいリンクテキスト';
</script>

textContentプロパティ

タグ内のテキストのみを変更
HTMLタグは無視される
表示上の空白は改行以外無視される

サンプルコード：


<a id="myLink" href="#">リンクテキスト</a>
<script>
const linkElement = document.getElementById('myLink');
linkElement.textContent = '新しいリンクテキスト';
</script>

innerHTMLプロパティ

タグ内のHTML構造ごと変更可能
HTMLタグも反映される
動的にHTMLを挿入する場合に便利
セキュリティリスクに注意が必要

サンプルコード：


<a id="myLink" href="#">リンクテキスト</a>
<script>
const linkElement = document.getElementById('myLink');
linkElement.innerHTML = '<strong>新しい</strong><span style="color:red;">リンクテキスト</span>';
</script>

各方法の比較と使い分け

方法	特徴	メリット	デメリット
innerText	表示テキストのみ変更	シンプルで使いやすい	HTMLタグは使用不可
textContent	表示テキストのみ変更	シンプルで使いやすい	HTMLタグは使用不可、空白は保持されない
innerHTML	HTML構造ごと変更	動的なHTML生成に便利	セキュリティリスクに注意

aタグのテキスト変更の実践例

ボタンクリックでリンク先とテキストを変更

ユーザー操作に応じて動的にリンクを変更

サンプルコード：


<a id="myLink" href="#">リンクテキスト</a>
<button id="changeButton">変更</button>
<script>
const buttonElement = document.getElementById('changeButton');
const linkElement = document.getElementById('myLink');

buttonElement.addEventListener('click', () => {
  linkElement.href = 'https://www.example.com';
  linkElement.textContent = '新しいリンク先';
});
</script>

APIから取得したデータを表示

外部データと連携し動的なコンテンツを表示

サンプルコード：


<a id="myLink" href="#">リンクテキスト</a>
<script>
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const linkElement = document.getElementById('myLink');
    linkElement.href = data.url;
    linkElement.textContent = data.title;
  });
</script>

まとめ

JavaScriptでaタグのテキストを変更する方法は、innerText、textContent、innerHTMLの3種類
目的に最適な方法を選択することが重要
動的なウェブページ制作に活用できる

参考資料

よくある質問

innerTextとtextContentの違いは何ですか？

どちらもタグ内のテキストのみを変更しますが、innerTextは表示上の空白を保持する一方、textContentは改行以外の空白を無視します。

innerHTMLはなぜセキュリティリスクがあるのですか？

innerHTMLはHTML構造ごと変更するため、外部から取得したデータに悪意のあるスクリプトが含まれている場合、それが実行されてしまう可能性があります。

aタグのテキスト変更はどのような場面で使われますか？

ボタンクリックでリンク先を変更する場合や、APIから取得したデータを表示する場合など、動的にコンテンツを変更したい場合に利用されます。

その他の参考記事:jquery href 書き換え