概要: このチュートリアルでは、要素に含まれるHTMLマークアップを取得または設定するために、要素のJavaScript innerHTMLプロパティを使用する方法を学習します。
innerHTMLはElementのプロパティであり、要素内に含まれるHTMLマークアップを取得または設定できます。
element.innerHTML = 'new content';
element.innerHTML;Code language: JavaScript (javascript)要素のinnerHTMLプロパティの読み取り
要素に含まれるHTMLマークアップを取得するには、次の構文を使用します。
let content = element.innerHTML;Code language: JavaScript (javascript)要素のinnerHTMLを読み取ると、ウェブブラウザは要素の子孫のHTMLフラグメントをシリアル化する必要があります。
1) 簡単なJavaScript innerHTMLの例
次のマークアップがあるとします。
<ul id="menu">
<li>Home</li>
<li>Services</li>
</ul>Code language: HTML, XML (xml)次の例では、innerHTMLプロパティを使用して<ul>要素の内容を取得します。
let menu = document.getElementById('menu');
console.log(menu.innerHTML);Code language: JavaScript (javascript)動作の仕組み
- まず、
getElementById()メソッドを使用して、そのID（menu）で<ul>要素を選択します。 - 次に、
innerHTMLを使用して<ul>要素のHTMLコンテンツを取得します。
出力
<li>Home</li>
<li>Services</li>Code language: HTML, XML (xml)2) 現在のHTMLソースの検査
innerHTMLプロパティは、ページの読み込み以降に行われたすべての変更を含め、ドキュメントの現在のHTMLソースを返します。
次の例を参照してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript innerHTML</title>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Services</li>
</ul>
<script>
let menu = document.getElementById('menu');
// create new li element
let li = document.createElement('li');
li.textContent = 'About Us';
// add it to the ul element
menu.appendChild(li);
console.log(menu.innerHTML);
</script>
</body>
</html>Code language: HTML, XML (xml)出力
<li>Home</li>
<li>Services</li>
<li>About Us</li>Code language: HTML, XML (xml)動作の仕組み。
- まず、
getElementById()メソッドを使用して、IDがmenuの<ul>要素を取得します。 - 次に、新しい
<li>要素を作成し、createElement()およびappendChild()メソッドを使用して<ul>要素に追加します。 - 次に、
<ul>要素のinnerHTMLプロパティを使用して<ul>要素のHTMLを取得します。<ul>要素の内容には、初期コンテンツと、JavaScriptによって動的に作成された動的コンテンツが含まれます。
要素のinnerHTMLプロパティの設定
innerHTMLプロパティの値を設定するには、次の構文を使用します。
element.innerHTML = newHTML;設定によって、要素の既存の内容が新しい内容に置き換えられます。
たとえば、document.body要素の内容をクリアすることで、ドキュメントのすべてのコンテンツを削除できます。
document.body.innerHTML = '';Code language: JavaScript (javascript)⚠️ セキュリティリスク
HTML5では、innerHTMLで挿入された<script>タグは実行されないように指定されています。
次のindex.htmlドキュメントがあるとします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS innerHTML example</title>
</head>
<body>
<div id="main"></div>
<script src="app.js"></script>
</body>
</html>Code language: HTML, XML (xml)そして、app.jsファイルは次のようになります。
const scriptHTML = `<script>alert("Alert from innerHTML");</script>`;
const main = document.getElementById('main');
main.innerHTML = scriptHTML;Code language: JavaScript (javascript)この例では、<script>タグ内のalert()は実行されません。
ただし、app.jsのソースコードを次のように変更した場合
const main = document.getElementById('main');
const externalHTML = `<img src='1' onerror='alert("Error loading image")'>`;
// shows the alert
main.innerHTML = externalHTML;Code language: JavaScript (javascript)この例では、srcが1の画像は正常に読み込まれません。そのため、alert()を実行するエラーが発生します。
単純なalert()ではなく、ハッカーが悪意のあるコードを含める可能性があり、ウェブページを開いたユーザーは脆弱性を持つことになります。
したがって、制御できないコンテンツをinnerHTMLに設定しないでください。セキュリティリスクに直面する可能性があります。
ドキュメントにプレーンテキストを挿入する場合は、innerHTMLではなくtextContentプロパティを使用できます。textContentはHTMLとしてではなく、生のテキストとして解析されます。
概要
- 要素の
innerHTMLプロパティを使用して、要素に含まれるHTMLを取得または設定します。 innerHTMLプロパティは、ページの読み込み以降に行われた変更を含め、要素の現在のHTMLソースを返します。- セキュリティリスクを回避するために、制御できない新しいコンテンツを設定するために
innerHTMLを使用しないでください。
