javascript htmlタグ内の文字列を変更する

作成日 2020.10.17
更新日 2022.07.12
javascript
javascript

javascriptでtextContentを使って、htmlタグ内にある文字列を変更するサンプルコードを記述してます。

1. 環境
2. 文字列変更
3. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 103.0.5060.114

Javascript サンプル集はこちら

文字列変更

「textContent」メソッドの使えば、文字列を変更することが可能です。

document.getElementById("ID名").textContent = "文字列を変更しました";

実際に変更してみます。

<p id="test">変更前</p>
<button id="btn" onclick="hoge()">button</button>

<script>

document.getElementById("btn").onclick = function(){
  document.getElementById("test").textContent = "変更後"  
}

</script>

実行結果

「innerHTML」との違いは、htmlタグを文字列として扱うか扱わないかとなります。
※「innerHTML」は、htmlタグをタグとして扱います。

<p id="test1">変更前</p>
<p id="test2">変更前</p>
<button id="btn" onclick="hoge()">button</button>

<script>

document.getElementById("btn").onclick = function () {
    document.getElementById("test1").textContent = "<b>変更後</b>"
    document.getElementById("test2").innerHTML = "<b>変更後</b>"
}

</script>

実行結果

「innerText」との違いは、改行コードの扱いの違いとなります。
※「innerText」のみ改行コードを入れると改行されます。

<p id="test1">変更前</p>
<p id="test2">変更前</p>
<p id="test3">変更前</p>
<button id="btn" onclick="hoge()">button</button>

<script>

document.getElementById("btn").onclick = function () {
    document.getElementById("test1").textContent = "<b>変更\n後</b>"
    document.getElementById("test2").innerHTML = "<b>変更\n後</b>"
    document.getElementById("test3").innerText = "<b>変更\n後</b>"
}

</script>

実行結果

また、javascript部はdocument.getElementByIdを省略して「id名」のみで記述することも可能です。関数もアロー関数を使用して、簡略化できます。

btn.onclick = () => {
  test.textContent = "変更後"  
}

アロー関数の使い方

サンプルコード

以下は、「textContent」を使って「文字列変更」ボタンをクリックして、表示されているテキストを変更するサンプルコードとなります。

※cssには「uikit」を使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- UIkit CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.14.3/dist/css/uikit.min.css" />
</head>
<style>
  .container {
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 25px;
  }
</style>
<script>

  function changText() {

    document.getElementById("txt").textContent = "文字列を変更しました";

  }

</script>

<body>
  <div class="container">

    <div>
      <div class="uk-card uk-card-default uk-card-small">
        <div id="txt" class="uk-text-center uk-card-body">
          テキストが変更されます。
        </div>
      </div>
      <button class="uk-button uk-button-primary uk-align-center" onclick="changText()">文字列変更</button>
    </div>

  </div>
</body>

</html>

実行結果を確認すると、文字列が変更されていることが確認できます。