jQueryオブジェクトをHTML文字列に変換したり戻したりする方法

jQueryオブジェクト ⇒ HTML文字列
HTML文字列 ⇒ jQueryオブジェクト

このように互いに変換したい場合、いくつかのjQuery関数を組み合わせて使えば簡単に変換可能です。

ということでここではその変換テクニックについて詳解していきます。

jQueryオブジェクトをHTML文字列に変換する方法

まず初めはjQueryオブジェクトを文字列としてのHTMLに変換する方法

その変換は次のような手順で可能です。

  1. 変換したい要素を入れるダミーの要素を作る
  2. 要素をclone関数でコピーしてダミー要素に挿入
  3. html関数でダミー要素内部のHTML取得

clone関数というのはあるjQueryオブジェクトのディープコピーを取得できる関数です。

それでこの関数と要素内部のhtmlを取得できるhtml関数をうまく組み合わせれば変換できます。

 

では具体的な例を使って説明しましょう。

例えば次がある要素 elem  のHTM文字列を取得しているコード例

まず jQuery('<div>')  でダミーのdiv要素を作成

そして elem.clone(true)  を実行することでイベントを含むコピー要素を dummy  に追加

あとは dummy.html()  でダミー内部のHTMLを取得すればHTMLに変換できるという訳です。

 

ちなみに上のコードは次のように1行でスマートに書けます。

 

もし頻繁にHTML文字列への変換を行うなら次のように関数化するとさらに便利

 

以上がjQueryオブジェクトをHTML文字列に変換する方法です。

ダミー要素を作成してclone関数とhtml関数をうまく組み合わせて使うというのがポイント

HTML文字列をjQueryオブジェクトに変換する方法

お次は逆に文字列のHTMLをjQueryオブジェクトに変換する方法

その変換手順は次の通りです。

  1. parseHTML関数で要素のノード配列取得
  2. ノード配列をjQueryオブジェクトに変換

parseHTML関数は渡されたjQueryオブジェクトをノード配列に変換する関数です。

ただしノード配列はJavaScriptネィティブで使われるノード配列になっています。

なのでparseHTMLの後にjQueryオブジェクトに戻す作業も必要なことに注意

 

ではこちらも具体的な例を使ってやり方を説明しましょう。

例えば次がHTMLが入った変数 html  をjQueryオブジェクトに変換しているコード例

まず jQuery.parseHTML(html)  を実行してHTMLをノード配列 nodes  に変換

そのあと jQuery(nodes[0])  でノード配列をjQueryオブジェクトに変換しています。

 

ちなみに上のコードは次のように1行でスマートに書くことも可能

 

また次のように変換用の関数を作っておけばさらに便利

 

以上がHTML文字列をjQueryオブジェクトに変換する方法です。

こちらはparseHTML関数を使えば簡単ですね。

ここまでのまとめ

ということで変換方法を簡単にまとめ

  • jQueryオブジェクト⇒HTML文字列に変換
    ダミーの要素を作り、変換したい要素をcloneでコピーしてダミーの中に入れる
    あとはダミーからhtml関数を実行して内部のHTMLを取得すればOk
  • HTML文字列⇒jQueryオブジェクトに変換
    まずparseHTML関数でHTML文字列からノード配列を取得
    そのあとjQueryで囲ってjQueryオブジェクト化させればOK

やり方さえ知っていればたがいに変換するのは簡単です。

以上jQueryオブジェクトとHTML文字列を変換する方法についてでした。ではでは・△・)ノ バイバイ

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください