https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-use-innerhtml-property-which-is-convenient-for-getting-rewriting-html-in-an-element-with-javascript/
https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-use-innerhtml-property-which-is-convenient-for-getting-rewriting-html-in-an-element-with-javascript/

JavaScriptで要素内のHTMLの取得・書き換えに便利なinnerHTMLプロパティの使い方

要素内のHTMLの取得・書き換えに便利なinnerHTML

JavaScriptで既存の要素内のHTMLを取得したり、書き換えたりする場合はinnerHTMLプロパティが便利です。

innerHTMLはHTMLをそのまま取得・出力してしまうため、入力フォームで出力された内容をそのまま出力する際に利用しないでください。

入力フォームに悪意のあるJavaScirptコードが入力されて、それをinnerHTMLでそのまま出力したために、サイトが改ざんされるというのは割とよくあるケースです。

プロパティ

プロパティ意味
要素.innerHTML要素内のHTML文字列文字列

サンプルコード

ページを開いてから3秒後にHTML要素を入れ替えるシンプルなサンプルコードを紹介します。

テキストを「Hello World」に差し替えます。また、HTMLタグが反映されていることが分かるように、太字にします。

Output
私は書き換え前のテキストよ
Pug
#targetText 私は<span class="font-weight-bold">書き換え前</span>のテキストよ
JavaScript
const targetText = document.getElementById('targetText');

setTimeout(() => {
	//3秒後にHTMLを差し替えます。
targetText.innerHTML = '<span class="font-weight-bold">Hello World</span>';
}, 3000);
インストラクター
コメント

コメントを残す