[JavaScript] HTML内のタグをを動的に変更する（innerHTML）

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

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

サンプル

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

function sample(){
  document.getElementById("area1").innerHTML =
      "<span style='color:red;'>hoge</span>";
}

function sample(){

document.getElementById("area1").innerHTML =

"<span style='color:red;'>hoge</span>";

}

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

※「innerHTML」の大文字小文字は、この表記通り指定する必要があります。

実行サンプル

ボタンを押すと、テキストボックスに指定したHTMLタグが黄色部分に反映されます。

変更前

解説

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

執筆者：とら