outerHTML
は Element
DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで指定された文字列を解釈したノードの要素に置き換えることができます。
要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに innerHTML
プロパティを使用してください。
構文
var content = element.outerHTML; element.outerHTML = htmlString;
値
outerHTML
の値を読み取ると、 element
およびその子孫の HTML シリアライズを含む DOMString
が返されます。 outerHTML
の値を設定すると、その要素とそのすべての子孫を、指定された htmlString
を解釈して構築された新しい DOM ツリーで置き換えます。
例外
SyntaxError
outerHTML
に正しくない HTML の文字列を使用して設定しようとした場合。NoModificationAllowedError
outerHTML
をDocument
の直接の子である要素、たとえばDocument.documentElement
に対して設定しようとした場合。
例
要素の outerHTML
プロパティの値を得る例を示します。
// HTML:
// <div id="d"><p>Content</p><p>Further Elaborated</p></div>
d = document.getElementById("d");
console.log(d.outerHTML);
// 次の文字列 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
// が、コンソールウィンドウに出力されます。
次の例では、 outerHTML
プロパティに値を設定し、ノードを置換します。
// HTML:
// <div id="container"><div id="d">This is a div.</div></div>
container = document.getElementById("container");
d = document.getElementById("d");
console.log(container.firstChild.nodeName); // "DIV" が記録される
d.outerHTML = "<p>This paragraph replaced the original div.</p>";
console.log(container.firstChild.nodeName); // "P" が記録される
// #d の div 要素はもはや文書ツリーの一部ではなく、
// 新たな段落に置き換えられました。
メモ
要素が親要素を持たない場合、その outerHTML
プロパティに値を設定してもその要素や子孫は変更されません。多くのブラウザーでは例外も発生します。以下に例を示します。
var div = document.createElement("div");
div.outerHTML = "<div class=\"test\">test</div>";
console.log(div.outerHTML); // output: "<div></div>"
また、文書の中で要素が置換された場合も、 outerHTML
プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。
var p = document.getElementsByTagName("p")[0];
console.log(p.nodeName); // "P" を表示
p.outerHTML = "<div>This div replaced a paragraph.</div>";
console.log(p.nodeName); // "P" のまま
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
DOM Parsing and Serialization Element.outerHTML の定義 |
草案 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
関連情報
- DOM ツリーを XML または HTML にシリアライズ:
XMLSerializer
- XML または HTML を DOM ツリーに解釈:
DOMParser
HTMLElement.outerText