outerHTMLで子孫を含む要素全体を取得する【JavaScript】

この記事では、outerHTMLを使って、要素全体を取得してみます。

outerHTML

使い方

element.outerHTMLという形式で使います。

対象エレメントの要素を子孫要素も含んで取得します。

下記のHTMLのid="target"の要素に対して、outerHTMLを取得してみましょう。

<div>
  <p id="target" class="hoge"><span>ターゲット</span></p>
</div>

var target = document.getElementById('target');
console.log(target.outerHTML);
// => <p id="target" class="hoge"><span>ターゲット</span></p>

このように、対象要素<p id="target">の子孫要素も含んで全体を取得します。

innerHTMLとの違い

outerHTMLに対比するプロパティに「innerHTML」があります。

innerHTMLは要素内のHTMLを取得します。先程のHTMLにinnerHTMLを使ってみます。

var target = document.getElementById('target');
console.log(target.innerHTML);
// => <span>ターゲット</span>

となり、対象要素の「内側」を返します。