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

投稿日:2016/03/03 / 更新日:2016/03/03

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プロパティを取得、変更します。

RUN
HTML
CSS
JavaScript

<p id="target">SYNCER BY <b>あらゆ</b></p> <p id="output" class="output"></p> <p id="error" class="error none"></p> <p><button id="get" class="button">取得</button></p> <p><button id="set" class="button">変更</button></p> <p><button id="reset" class="button">リセット</button></p>

.output { color: #333 ; text-align: center ; padding: 8px 0 ; border: 1px solid #333 ; min-height: 24px ; } .error { color: #f00 ; padding: 8px 12px ; border: 1px solid #333 ; min-height: 24px ; } .button { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-size: 1rem ; font-weight: 700 ; border: 1px solid #e6e6e6 ; width: 100% ; box-sizing: border-box ; } .button:hover { cursor: pointer ; background: #e6e6e6 ; } .none { display: none ; } html{ font:400 14px / 1.618 ArialMT,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","ＭＳＰゴシック","Osaka" ; }

// 取得 document.getElementById( "get" ).addEventListener( "click", function() { try { // 要素を取得 var pElement = document.getElementById( "target" ) ; // p要素のHTMLを取得 var html = pElement.outerHTML ; // 取得した結果を出力 document.getElementById( "output" ).textContent = html ; // コンソールで内容を出力 console.log( html ) ; // エラーを非表示 errorElement.className = "error none" ; // エラー表示 } catch ( msg ) { errorElement.className = "error" ; errorElement.textContent = msg ; console.error( msg ) ; } } ) ; // 変更 document.getElementById( "set" ).addEventListener( "click", function() { try { // 要素を取得 var pElement = document.getElementById( "target" ) ; // p要素のHTMLを変更 pElement.outerHTML = '<pre id="target"><b>SYNCER</b> BY <i><b>あらゆ</b></i></pre>' ; // コンソールで内容を出力 console.log( pElement ) ; // エラーを非表示 errorElement.className = "error none" ; // エラー表示 } catch ( msg ) { errorElement.className = "error" ; errorElement.textContent = msg ; console.error( msg ) ; } } ) ; // リセット document.getElementById( "reset" ).addEventListener( "click", function() { initialize() ; } ) ; // エラー表示用の要素 var errorElement = document.getElementById( "error" ) ; // 初期化 function initialize() { errorElement.className = "error none" ; document.getElementById( "output" ).textContent = "" ; document.getElementById( "target" ).outerHTML = '<p id="target">SYNCER BY <b>あらゆ</b></p>' ; }

構文

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

返り値

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

指定する値

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

外部リンク

W3C勧告 - W3Cによる仕様書。

説明

サンプルコード

デモ

構文

返り値

指定する値

関連項目

外部リンク