Element.innerHTML - 要素のHTMLを取得、変更する

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

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

説明

ElementオブジェクトのinnerHTMLプロパティは、その要素の中身がHTMLとして含まれています。その要素自身は含まれません。

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

// pElement = <p> ... </p>

// p要素のHTMLを取得 ( → <span id="date"> ... 開設した。 )
var html = pElement.innerHTML ;

例えば、上記のp要素のinnerHTMLプロパティには、<span id=から開設した。までの中身全てが含まれます。中身を取り囲む<p>と</p>は含まれません。

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

<p><span id="date">2016年2月10日</span>、なんだかんだで<a href="https://syncer.jp/">SYNCER</a>は運営が続いている。</p>

innerHTMLプロパティに新しく、HTMLのマークアップを文字列で指定すると、それがそのまま要素の中身と入れ替わります。上記の例では、innerHTMLプロパティの値を変更したことで、p要素の中身が丸ごと、変わってしまいました。とても手軽に要素の中身を変更できる便利なプロパティなので、使う機会は多いと思います。

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

<p></p>

では、innerHTMLプロパティの値に空の文字列を指定すると、jQueryのempty()と同じように、対象要素の中身を空にすることができます。

サンプルコード

<p id="target">SYNCER by <span id="author">あらゆ</span></p>

// p要素を取得
var pElement = document.getElementById( "target" ) ;

// p要素のHTMLを取得 ( → 'SYNCER by <span id="author">あらゆ</span>' )
var html = pElement.innerHTML ;

// p要素を取得
var pElement = document.getElementById( "target" ) ;

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

デモ

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

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.innerHTML ; // 取得した結果を出力 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.innerHTML = "<b>SYNCER</b> BY <i><b>あらゆ</b></i>" ; // コンソールで内容を出力 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" ).innerHTML = "SYNCER BY <b>あらゆ</b>" ; }

構文

string html = Element.innerHTML
Element.innerHTML = string newHtml

返り値

項目	説明
html	要素の中身のHTML。要素自身のタグは含まない。

指定する値

項目	説明
newHtml	新しく設定したいHTMLマークアップの文字列。

外部リンク

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

説明

サンプルコード

デモ

構文

返り値

指定する値

関連項目

外部リンク