Element: setHTMLUnsafe() メソッド

Baseline 2024

Newly available

Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

setHTMLUnsafe() は Element インターフェイスのメソッドで、HTML の文字列を DocumentFragment として解釈し、DOM 内の要素のサブツリーを置き換えるために使用します。入力された HTML は宣言的シャドウルートを含むことがあります。

メソッド名の接尾辞 "Unsafe" は、そのメソッドが <script> 要素やスクリプト、イベントハンドラーのコンテンツ属性など、XSS に関連する安全でない可能性のある入力をサニタイズしたり除去したりしないことを示します。

HTML の文字列が特定のシャドウホストに複数の宣言的シャドウルートを定義している場合、最初の ShadowRoot だけが作成されます。以降の宣言は、そのシャドウルート内の <template> 要素として解釈できます。

メモ: このメソッドは、HTML の文字列が宣言的なシャドウルートを格納する可能性がある場合に、Element.innerHTML の代わりに使用しましょう。

構文

js
setHTMLUnsafe(html)

引数

html

解釈できる HTML を定義する文字列。

返値

なし (undefined)。

例外

なし。

例

下記のコードは、HTMLの文字列を解釈して target という要素を持つ Element に挿入する方法を示しています。

js
const value = "<p>これはテキストの文字列です</p>"; // HTML　の文字列

// id が "target" の要素を取得し、文字列を設定する。
document.getElementById("target").setHTMLUnsafe(value);

// 結果（文字列として）: "<p>これはテキストの文字列です</p>"

仕様書

Specification
HTML Standard
# dom-element-sethtmlunsafe

ブラウザーの互換性

BCD tables only load in the browser

関連情報