Element.outerHTML

outerHTMLElement DOM インターフェイスの属性で、要素とその子孫を含む部分の HTML がシリアライズされたものを取得します。設定することで指定された文字列を解釈したノードの要素に置き換えることができます。

要素の内容のみの HTML 表現を取得する場合や、要素の内容を置き換える場合であれば、代わりに innerHTML プロパティを使用してください。

構文

var content = element.outerHTML;

element.outerHTML = htmlString;

outerHTML の値を読み取ると、 element およびその子孫の HTML シリアライズを含む DOMString が返されます。 outerHTML の値を設定すると、その要素とそのすべての子孫を、指定された htmlString を解釈して構築された新しい DOM ツリーで置き換えます。

例外

SyntaxError
outerHTML に正しくない HTML の文字列を使用して設定しようとした場合。
NoModificationAllowedError
outerHTMLDocument の直接の子である要素、たとえば 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 の定義
草案  

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
outerHTMLChrome 完全対応 33
補足
完全対応 33
補足
補足 This API was previously available on the Node API.
Edge 完全対応 14Firefox 完全対応 11IE 完全対応 4Opera 完全対応 7Safari 完全対応 9WebView Android 完全対応 あり
補足
完全対応 あり
補足
補足 This API was previously available on the Node API.
Chrome Android 完全対応 33
補足
完全対応 33
補足
補足 This API was previously available on the Node API.
Firefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装ノートを参照してください。
実装ノートを参照してください。

関連情報