LemonteaのUnity部屋

C#とかのお話です~

JavaScript入門 テキストやタグの動的な書き換え

こんにちは。レモンティーです。

今回はテキストやタグを動的に書き換えます。

使うのは次の2つです。

まずdocument.getElementByIdで変更の対象を取得します。

let x = document.getElementById("test");

次に取得した対象にinnerHTMLで変更を加えます。

 x.innerHTML = "aaaa";




このテキストが変化します。

innerHTMLはサンプルのように、HTMLのタグを使うこともできます。
Sapmle2ではbタグによる強調、Sample3ではbrタグによる改行が行われています。

コードはこんな感じです。
HTML

<button type="button" onclick="changeText('これはテストです。')">Sample1</button>
<button type="button" onclick="changeText('これは<b>テスト</b>です。')">Sample2</button>
<button type="button" onclick="changeText('これは<br>テストです。')">Sample3</button>

<p id="test">このテキストが変化します。</p>

JS

<script>
  function changeText(text){
    let target = document.getElementById("test");
    target.innerHTML = text;
  }
</script>


今回はこれでおしまいです。
www.sawalemontea.com