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

投稿日: / 更新日:

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

構文

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

返り値

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

指定する値

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

関連項目

外部リンク