innerHTMLとouterHTML - JavaScript
published:
2018.07.09 /
modified:
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 を取得したり、設定する。