DOM

：

：

Element.innerHTML プロパティ

　編集：2022.09.20 by T.A.

[Edge]。→

element の HTML、XML のマークアップを文字列で取得／設定します。

mdn： メモ： <div>、<span>、<noembed> ノードが「&」、「<」、「>」の文字を含むテキストの子ノードを持っている場合、innerHTML はこれらの文字を HTML エンティティの "&"、"<"、">" としてそれぞれ返します。これらのテキスト ノードの内容の生のコピーを取得するには Node.textContent を使用してください。

要素の内容を置き換えるというより、文書に HTML を挿入するという場合には、element.insertAdjacentHTML() メソッドを使用してください。

構文
element.innerHTML
element Element オブジェクト。
値

要素の子孫を HTML シリアライズしたものを含んだ DOMString です。

innerHTML に値を設定すると、要素のすべての子孫を削除して、HTMLString の文字列で与えられた HTML を解析して構築されたノードに置き換えます。

例外
SyntaxError
正しくない形の HTML の文字列を使用して innerHTML の値を設定しようとした場合。
NoModificationAllowedError
親が Document であるノードに HTML を挿入しようとした場合。

¶省く

例

ウェブページ上のボックス内にメッセージを記録するメカニズムを作成します。

JavaScript： 

function log(msg) {
  var logElem = document.querySelector(".log");

  var time = new Date();
  var timeStr = time.toLocaleTimeString();
  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
}

log("Logging mouse events inside this container...");

log() 関数は Date オブジェクトから toLocaleTimeString() を使用して現在時刻を取得し、タイムスタンプとメッセージテキストから成る文字列を構築してログ出力を生成します。それから "log" クラスのボックスにメッセージを追加します。

HTML： 

<div class="box">
  <div><strong>Log:</strong></div>
  <div class="log"></div>
</div>

"box" クラスが付いた <div> は、単なるレイアウト用途のコンテナーであり、内容とその周りのボックスを表します。クラスが "log" である <div> は、ログテキスト自身のコンテナーです。

¶省く

HTML： 

<SPAN id=IdSpan>SPAN要素</SPAN>

JavaScript： 

IdSpan.innerHTML="テキストと<B>B要素</B>に書き換える&divide;"

表示結果：

テキストとB要素に書き換える÷

更に、

JavaScript： 

D=IdSpan.innerHTML //＝[string]：テキストと<b>B要素</b>に書き換える÷
テスト