JavaScript

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>

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


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript
-

© 2020 ウェブつく Powered by AFFINGER5