Element.outerHTML

概要

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"のまま

仕様

ブラウザ互換性

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!

参考情報

• HTMLElement.outerText
• MSDN: outerHTML Property