innerHTMLとouterHTML - JavaScript

innerHTML プロパティと outerHTML プロパティに関するメモ。

innerHTML プロパティ

innerHTML プロパティは、要素に含まれる HTML を取得したり、設定したりする。

innerHTML で HTML を取得

innerHTML プロパティで HTML を取得する。以下はその例。

HTML

<div id="hoge"><p>innerHTMLサンプル</p></div>

JavaScript

var html = document.getElementById('hoge').innerHTML;
console.log(html); // <p>innerHTMLサンプル</p>

innerHTML で HTML を設定

innerHTML プロパティ で HTML を設定する。以下はその例。

var htmlString = '<p>innerHTMLで置き換える</p>';
document.getElementById('hoge').innerHTML = htmlString;

outerHTML プロパティ

outerHTML プロパティは、要素および、その要素に含まれる HTML を取得したり、設定したりする。

outerHTML で HTML を取得

outerHTML プロパティで HTML を取得する。以下はその例。

HTML

<div id="hoge"><p>outerHTMLサンプル</p></div>

JavaScript

var html = document.getElementById('hoge').outerHTML;
console.log(html); // <div id="hoge"><p>outerHTMLサンプル</p></div>

outerHTML で HTML を設定

outerHTML プロパティで HTML を設定する。以下はその例。

var htmlString = '<div id="hoge"><p>outerHTMLで置き換える</p></div>';
document.getElementById('hoge').outerHTML = htmlString;

innerHTML と outerHTML の違い

innerHTML は、要素内の HTML を取得したり、設定するのに対して、
outerHTML は、要素と要素内の HTML を取得したり、設定する。