どうも！WEBおじさんです！
ちょっと前のいくつかの記事で語っちゃって長ったらしくてうっとおしかったので、今日はさらっと短めに、技術的なことを書いていきます。
お役立ちってとこですね。
今日は、jQueryで指定した要素のHTMLを取得する方法です。
使用するメソッドは「html」と「prop」です。
「え？prop？」と思った中級者さん方、こちらはとても便利な感じで使えるので、後ほど。
まずは、初級者向けの「html」から。
とても簡単です。very easyです。
では、HTMLとjQueryのソースを。
【HTML】
<div id=”box”>
<p id=”text1″>1行目テキスト</p>
<p id=”text2″>2行目テキスト</p>
<p id=”text3″>3行目テキスト</p>
</div>
【jQuery】
var txt1 = $(‘#text1’).text();
var str = $(‘#box’).html();
この出力結果は以下のようになります。
txt1 → 「1行目テキスト」
str → 「<p id=”text1″>1行目テキスト</p>
<p id=”text2″>2行目テキスト</p>
<p id=”text3″>3行目テキスト</p>」
こんな感じですね。
txt1の方はおまけです。
要素内のテキストを取得したい場合は「text」メソッドですね。
htmlタグごと取得するのが「html」メソッドです。
比較のために書きました。
取得した後はどちらも文字列なので、一部分を編集とかする場合は文字列のように編集してください。
で、HTMLを変更する場合は下のような感じで引数にHTMLを入れてあげればオッケーです。
$(‘#box’).html(‘<p>入れ替えたhtmlです。</p>’);
これで「box」内のhtmlは入れ替えられました。
さて、HTMLを取得するごく一般的なやり方を書いたのですが、使っていくうちにちょっと不便なことがあるんです。
気付いた方、いらっしゃると思います。
そう、このhtmlメソッドって、指定した要素の「内側」のソースしか取得しないんです。
色々使っていくとね、指定した要素ごとHTMLを入れ替えたいとか編集したいとかあるんですよね。
そうすると、htmlメソッドを使っている場合、その親要素を指定することになるんですけど、編集したい要素がidを持ってなくてクラスだったり属性を何も持っていないという場合、編集したくないものまで編集されてしまうことがあるのです。
それってとても使い勝手が悪いですよね。
そんな時に役に立つのが「prop」メソッドなのです！
「prop」はホントに便利で、チェックボックスやラジオボタンのチェック確認もできてしまうんです。
今回は、指定した要素ごとHTMLを取得することができてしまう書き方の説明です！
【jQuery】
var str = $(‘#box’).prop(‘outerHTML’);
「prop」メソッドの引数に「outerHTML」と書くだけでなんと指定した要素も含めたHTMLが取得できるのです！
これ、マジで超便利。
死ぬほど使いまくってます。
ということで、いかがでしたでしょうか。
今回のヤツは絶対重宝される情報なので、みなさんも言いふらした方がいいですよ！ｗ
以上、WEBおじさんでした！
バイ！