JavaScriptで特定のHTMLの取得・書き換えに便利なouterHTMLプロパティの使い方

特定部分を直接書き換えるのに便利なouterHTML

JavaScriptでHTMLの特定部分を直接取得したり、書き換えたりする場合はouterHTMLプロパティが便利です。

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

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

outerHTMLinnerHTMLとは違い、自分自身も対象に含みます。

プロパティ

プロパティ意味
要素,outerHTML要素のHTML文字列
outerHTML

outerHTML

ページを開いてから3秒後にテキスト要素を画像要素に差し替えるサンプルコードを紹介します。

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

setTimeout(() => {
  //3秒後にHTMLを差し替えます。
  targetText.outerHTML = '<div class="text-center"><img src="https://placehold.jp/150x150.png" alt=""/></div>';
}, 3000);
インストラクター
コメント

コメントを残す