HTML DOM Element innerHTML 属性

定義と用法

innerHTML 属性設定または返却する要素の HTML コンテンツ(内部 HTML)

も参照してください:

innerText 属性

textContent 属性

例 1

id="myP" 要素の HTML コンテンツを取得します:

let html = document.getElementById("myP").innerHTML;

自分で試してみてください

例 2

id="demo" 要素の HTML コンテンツを変更します:

document.getElementById("demo").innerHTML = "I have changed!";

自分で試してみてください

例 3

id="myList" の <ul> 要素の HTML コンテンツを取得します:

let html = document.getElementById("myList").innerHTML;

自分で試してみてください

例 4

id="demo" の <p> 要素の HTML コンテンツを削除します:

element.innerHTML = "";

自分で試してみてください

例 5

変更する二つの要素の HTML コンテンツ:

let text = "Hello Dolly.";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;

自分で試してみてください

例 6

要素のHTML内容を繰り返します:

element.innerHTML += element.innerHTML;

自分で試してみてください

例7

リンクのHTML内容とURLを変更する:

element.innerHTML = "W3School";
element.href = "";

自分で試してみてください

文法

innerHTML属性を返す:

element.innerHTML

innerHTML属性を設定する:

element.innerHTML = text

属性値

説明
文字列。 HTML内容

返り値

タイプ 説明
文字列 要素のHTML内容

innerHTML、innerText、textContentの違い

innerText属性は以下を返します:

要素とそのすべての子要素のテキスト内容のみを返し、CSSで隠されたテキストのスペースやタグは含まれませんが、<script>や<style>要素を除きます。

innerHTML属性は以下を返します:

要素のテキスト内容、すべての空白と内部のHTMLタグが含まれています。

textContent属性は以下を返します:

要素とそのすべての後裔のテキスト内容、空白とCSSで隠されたテキストが含まれていますが、タグは含まれません。

HTMLの例

<p id="myP">   この要素には余分なスペースがあり、<span>span要素</span>を含んでいます。</p>

JavaScript 例

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

自分で試してみてください

上記の例では:

innerText属性は以下を返します:

この要素には余分なスペースがあり、span要素を含んでいます。

innerHTML属性は以下を返します:

   この要素には余分なスペースがあり、<span>span要素</span>を含んでいます。

textContent属性は以下を返します:

   この要素には余分なスペースがあり、span要素を含んでいます。

ブラウザがサポートしています

すべてのブラウザがサポートしています element.innerHTML

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート サポート サポート サポート サポート サポート