1. ウェブ
  2. Web API
  3. Element
  4. outerHTML

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Element: outerHTML プロパティ

Baseline
広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

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

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

値

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

例外

SyntaxError DOMException

outerHTML に有効ではない HTML の文字列を使用して設定しようとした場合に発生します。

NoModificationAllowedError DOMException

outerHTML を Document の直接の子である要素、たとえば Document.documentElement に対して設定しようとした場合。

例

要素の outerHTML プロパティから値を取得

HTML

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

Javascript

js
const d = document.getElementById("d");
console.log(d.outerHTML);

// 文字列 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
// がコンソールウィンドウに書き出されます。

outerHTML プロパティへ設置することでノードを置き換え

HTML

html
<div id="container">
  <div id="d">これは div です。</div>
</div>

Javascript

js
const container = document.getElementById("container");
const d = document.getElementById("d");

console.log(container.firstElementChild.nodeName); // "DIV" と出力

d.outerHTML = "<p>この段落は元の div を置き換えたものです。</p>";

console.log(container.firstElementChild.nodeName); // "P" と出力

// #d の div 要素は文書ツリーの一部ではなくなり、
// 新たな段落に置き換えられました。

メモ

要素が親ノードを持たない場合、その outerHTML プロパティに値を設定してもその要素や子孫は変更されません。以下に例を示します。

js
const div = document.createElement("div");
div.outerHTML = '<div class="test">test</div>';
console.log(div.outerHTML); // output: "<div></div>"

また、文書の中で要素が置換された場合も、 outerHTML プロパティが設定された変数は、引き続きオリジナルの要素への参照を保持しています。

js
const p = document.querySelector("p");
console.log(p.nodeName); // shows: "P"
p.outerHTML = "<div>This div replaced a paragraph.</div>";
console.log(p.nodeName); // still "P";

返値には HTML エスケープされた属性が入ります。

js
const anc = document.createElement("a");
anc.href = "https://developer.mozilla.org?a=b&c=d";
console.log(anc.outerHTML); // output: "<a href='https://developer.mozilla.org?a=b&amp;c=d'></a>"

仕様書

仕様書
HTML
# dom-element-outerhtml

ブラウザーの互換性

関連情報

  • DOM ツリーを XML 文字列にシリアライズ: XMLSerializer
  • XML または HTML を DOM ツリーに解釈: DOMParser
  • HTMLElement.outerText

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告