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で自分自身を含めた要素を取得する際にぜひ。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
Partner