DOM

：

：

Element.outerHTML プロパティ

　編集：2022.09.20 by T.A.

[Edge]。→、

element の自身のタグを含む要素 HTML 内容を文字列で取得／設定します。

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

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

構文
element.outerHTML
element Element。
値

DOMString。HTML シリアライズされたものが返されます。

outerHTML の値を設定すると、その要素とそのすべての子孫を、指定された htmlString を解釈して構築された新しい DOM ツリーで置き換えます。

例外
SyntaxError
outerHTML に正しくない HTML の文字列を使用して設定しようとした場合。
NoModificationAllowedError
outerHTML を Document の直接の子である要素、たとえば Document.documentElement に対して設定しようとした場合。
例

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

HTML： 

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

JavaScript： 

d = document.getElementById("d");
console.log(d.outerHTML);
// 次の文字列 '<div id="d"><p>Content</p><p>Further Elaborated</p></div>'
// が、コンソールウィンドウに出力されます。

¶省く

HTML： 

<SPAN id=IdTest>[SPAN要素。テキスト1<B>[B要素]</B>テキスト2±]</SPAN>
[SPAN要素。テキスト1[B要素]テキスト2±]

JavaScript： 

D=IdTest.outerHTML //＝[string]：<span id="IdTest">[SPAN要素。テキスト1<b>[B要素]</b>テキスト2±]</span>

ここで id まで変え書き換えてしまう。

SPAN要素B要素 
IdTest.outerHTML="<SPAN id=IdTest2 style='color:red'>SPAN要素<B>B要素</B></SPAN>";
	//↑idを変更して書き換え。
D=IdTest2.outerHTML; //＝[string]：<span id="IdTest2" style="color:red">SPAN要素<b>B要素</b></span>
テスト