HTML DOM Element innerHTML 属性
- 前のページ id
- 次のページ innerText
- 上一层に戻る HTML DOM Elements オブジェクト
例
例 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 |
サポート | サポート | サポート | サポート | サポート | サポート |
- 前のページ id
- 次のページ innerText
- 上一层に戻る HTML DOM Elements オブジェクト