jQueryを使ってHTML要素の取得をする際には
「.html()」メソッドなどを使用することが多くありますが
自分自身を含めた要素を取得したい場合には「.html()」メソッドでは
思い通りにいかなかったりします。

そのような場面で自分自身を含めた要素を取得する方法を
自分用のメモ書きとしてご紹介してみます。

jQueryで自分自身を含めた要素を取得する方法

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

◆HTML
<div id="example">
<p>このテキストはダミーです</p>
</div>

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

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

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

◆取得結果
<p>このテキストはダミーです</p>

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

これを自分自身となるID「#example」を含めた形で取得させるには
「.prop(‘outerHTML’)」を使用します。

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

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

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

◆取得結果
<div id="example">
<p>このテキストはダミーです</p>
</div>

このように「.prop(‘outerHTML’)」を使用して要素を取得すると
自分自身を含めた形で取得することが可能になります。

以上がjQueryで自分自身を含めた要素を取得する方法についてでした。

サンプルではIDの取得で解説しましたが
classやタグ自体で要素の取得する場合も同様になります。

jQueryで自分自身を含めた要素を取得する際にぜひ。。。