We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

element DOM インターフェースの outerHTML 属性は、その要素及び子孫を表す、シリアライズされた HTML 断片を得ることができます。また、与えられた文字列をパースしたノードで要素を置換するため、値を設定することもできます。

構文

var content = element.outerHTML;

content は、element 及びその子孫を表す、シリアライズされた HTML 断片を格納します。

element.outerHTML = content;

element は、フラグメント解析アルゴリズムのため、element の親をコンテキストノードとして、content の文字列をパースして生成されたノードで置換されます。  

要素の outerHTML プロパティの値を得る例を示します。

// HTML:
// <div id="d"><p>Content</p><p>Further Elaborated</p></div>

d = document.getElementById("d");
dump(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 プロパティに値を設定すると、エラーコード NO_MODIFICATION_ALLOWED_ERR の DOMException が投げられます。以下に例を示します。

document.documentElement.outerHTML = "test";  // DOMException が投げられる

また、文書の中で要素が置換された場合も、 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 の定義
草案  

ブラウザ互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 11 (11) 0.2 4.0 7 1.3
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) 11.0 (11) (有) (有) (有)

参考情報

ドキュメントのタグと貢献者

このページの貢献者: sii
最終更新者: sii,