[JavaScript] HTML内の文字を動的に変更する（innerText）

投稿日：2016年10月7日更新日：2018年4月28日

HTML内の文字を動的に変更するには、innerTextを使用します。

HTML内の文字を動的に変更するサンプル

例）id="area1"の要素に文字列を動的に埋め込む

function sample(){
  document.getElementById("area1").innerText = "変更しました";
}

function sample(){

document.getElementById("area1").innerText = "変更しました";

}

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <script src="sample.js"></script>
</head>
<body>
  <input type="button" value="ボタン" onclick="sample();">
  <div id="area1">変更前</div>
</body>
</html>

<head>

<title>Sample</title>

</head>

<body>

</body>

</html>

※「innerText」の大文字小文字はこの通り指定しないと動きません。

実行サンプル

ボタンを押すと、テキストボックスに指定した文字列が黄色部分に表示されます。

変更前

解説

innerTextを使うと、指定したタグ内のテキスト（文字）のセット/取得ができます。
innerTextではセットする値は全て文字列としてみなされるため、HTMLタグをセットしてもタグがそのままセットされてしまいます。
HTMLタグを正しく認識させたい場合は、innterHTMLを使用します。
（詳しくは「HTML内のタグを動的に変更する」をご覧ください。）

執筆者：とら