javascript aタグ テキスト 変更

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

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

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

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

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

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

  1. innerTextプロパティ

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

    サンプルコード：

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

  2. textContentプロパティ

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

    サンプルコード：

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

  3. 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タグのテキスト変更の実践例

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

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

    サンプルコード：

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

  2. 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 書き換え