DOM要素インターフェースのouterHTML属性は、子孫要素を含むその要素が記述されたシリアライズされたHTML断片を取得します。 文字列を与えることでノードの解析が行われ、要素を置き換えることが可能です。

文法

//取得
var content = element.outerHTML;

contentには、elementとその全子孫が記述されたシリアライズされたHTMLコードの断片が返されます。

//設定
element.outerHTML = content;

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は、DOMツリー上には既に無く、
// 新しいP要素と入れ替わった

注意事項

もし、elementがdocumentルートのノードの場合、このouterHTMLプロパティに設定をしようとすると、 NO_MODIFICATION_ALLOWED_ERRコード付きのDOMExceptionエラーが発生します。

// DOMExceptionエラーがスローされます
document.documentElement.outerHTML = "test";

また、document内でouterHTMLプロパティを設定することで要素が置換されても、 その要素を参照していた場合、置換後も元の要素を参照し続けます。

var p = document.getElementsByTagName("p")[0];
console.log(p.nodeName); // "P"を表示
p.outerHTML = "<div>このdivはp(段落)と置き換えられました。</div>";
console.log(p.nodeName); // まだ、"P"を表示

関連項目

• DOM Parsing and Serialization

ブラウザ互換性

デスクトップ

機能	Chrome	Firefox (Gecko)	IE	Opera	Safari
基本	0.2	11 (11)	4.0	7	1.3

モバイル

機能	Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	◯	11.0 (11)	◯	◯	◯

仕様

• MSDN: outerHTML property

 Back to top