innerHTMLとouterHTML - JavaScript

published: 2018.07.09 / modified:

innerHTMLプロパティとouterHTMLプロパティについてのメモ。

innerHTML

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

innerHTMLでHTMLを取得

innerHTMLプロパティでHTMLを取得するサンプル。

<div id="hoge"><p>innerHTMLサンプル</p></div>
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を取得するサンプル。

<div id="hoge"><p>outerHTMLサンプル</p></div>
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を取得または設定する。

Previous Article

Next Article