Element.outerHTML - 自身と中身のHTMLを取得、変更する

投稿日: / 更新日:

JavaScriptの、ElementオブジェクトのouterHTMLはその要素自身と中身のHTMLを取得、変更するプロパティです。

説明

ElementオブジェクトのouterHTMLプロパティは、その要素自身と中身のHTMLを含みます。要素自身も含んでいるのがinnerHTMLプロパティとの違いです。

<p><span id="date">2014年6月10日</span>、私は<a href="https://syncer.jp/">SYNCER</a>というウェブサイトを開設した。</p>
// pElement = <p> ... </p>

// p要素のHTMLを取得 ( → "<p> ... </p>" )
var html = pElement.outerHTML ;

例えば、上記のp要素のouterHTMLプロパティには、<p>から</p>までの全てが含まれます。innerHTMLの場合は、中身を取り囲む<p></p>は含まれませんが、outerHTMLの場合はこれを含みます。

// p要素のHTMLを変更
pElement.innerHTML = '<div><span id="date">2016年6月10日</span>、なんだかんだで<a href="https://syncer.jp/">SYNCER</a>は運営が続いている。</div>' ;
<div><span id="date">2016年2月10日</span>、なんだかんだで<a href="https://syncer.jp/">SYNCER</a>は運営が続いている。</div>

outerHTMLプロパティに新しく、HTMLのマークアップを文字列で指定すると、それがそのまま現在の要素と入れ替わります。上記の例では、outerHTMLプロパティの値を変更したことで、p要素自身とその中身が丸ごと、変わってしまいました。

// p要素のHTMLを変更
pElement.innerHTML = "" ;

では、outerHTMLプロパティの値に空の文字列を指定するとどうなるでしょうか。この要素が丸ごと、ドキュメント上からなくなってしまいます。

サンプルコード

<p id="target">SYNCER by <span id="author">あらゆ</span></p>
// p要素を取得
var pElement = document.getElementById( "target" ) ;

// p要素のHTMLを取得 ( → '<p id="target"> ... </p>' )
var html = pElement.outerHTML ;
// p要素を取得
var pElement = document.getElementById( "target" ) ;

// p要素のHTMLを変更
pElement.outerHTML = '<div><span id="website">SYNCER</span> by <span id="author">あらゆ</span></div>' ;

デモ

要素のouterHTMLプロパティを取得、変更します。

構文

string html = Element.outerHTML
Element.outerHTML = string newHtml

返り値

項目説明
htmlその要素自身と中身のHTML。

指定する値

項目説明
newHtml新しく設定したいHTMLマークアップの文字列。要素自身も含めて、新しいHTMLに置きかわる。

関連項目

外部リンク