jQueryで自身の要素を含めて取得する方法

2019年04月07日 (日)

jQueryを利用してHTML要素の取得をする場合
「.html()」メソッドなどを使用することが多くありますよね。

私は頻繁にあります。

自身を含めた要素を取得したい場合
「.html()」メソッドでは、思った通りの結果が得られなかったりします。

そのような場面で、自分自身を含めた要素を取得する方法です。

「これどうやるんだったかな」と忘れる度に調べるんですよね。

自身のメモとして残しながら、他の人のお役にも立てればと思います。


結論から先に申しますと、
「.html()」 の部分を 「.prop('outerHTML')」
に変更するだけです。


例として下記のようなHTML構造の要素があったとします。

.html() メソッドで取得してみる

HTML

<div id="example">
<p>ダミーのテキストです。</p>
</div>

このID「#example」に対して、
「.html()」メソッドを使って要素を取得するには下記のようになります。

jQueryのスクリプト

var html = $('#example').html();

取得結果 

この「.html()」メソッドを使って取得し得られた結果は
ID「#example」の中身となる下記の部分しか取得できません。

上記 html の変数の中身は下記のようになります。

<p>ダミーのテキストです。</p>

「#example」の中身だけが取得された状態になりますよね。


これを自身の要素 ID「#example」を含めた状態で取得させるには
「.prop('outerHTML')」を使用します。

.prop(‘outerHTML’) メソッドで取得してみる

この「.prop(‘outerHTML’)」で要素を取得する場合は
下記のように行います。

jQueryのスクリプト

var html = $('#example').prop('outerHTML');

取得結果

この「.prop(‘outerHTML’)」を使用して取得した場合は
自分自身となるID「#example」を含めた形での結果となります。

上記 html の変数の中身は下記のようになります。

<div id="example">
<p>ダミーのテキストです。</p>
</div>

このように「.prop('outerHTML')」を使用して要素を取得すると
自身を含めた状態で、結果を得ることが可能になります。