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

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

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

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

このページの目次

jQueryオブジェクトをHTML文字列に変換する方法
HTML文字列をjQueryオブジェクトに変換する方法
ここまでのまとめ

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

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

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

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

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

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

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

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

/** コピー元の要素 */
var elem = jQuery('#example');

/** 要素のHTML文字列を取得 */
var dummy = jQuery('<div>');
dummy.append(elem.clone(true));
var html = dummy.html();

/** コピー元の要素 */

var elem = jQuery('#example');

/** 要素のHTML文字列を取得 */

var dummy = jQuery('<div>');

dummy.append(elem.clone(true));

var html = dummy.html();

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

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

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

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

var html = jQuery('<div>').append(elem.clone(true)).html();

1	var html = jQuery('<div>').append(elem.clone(true)).html();

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

/** jQueryオブジェクトをHTML文字列に変換 */
function convertToHTML(elem){
  return jQuery('<div>').append(elem.clone(true)).html();
}

/** jQueryオブジェクトをHTML文字列に変換 */

function convertToHTML(elem){

return jQuery('<div>').append(elem.clone(true)).html();

}

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

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

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

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

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

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

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

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

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

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

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

/** HTML文字列が入った変数 */
var html = '<div>...(途中略)...</div>';

var nodes = jQuery.parseHTML(html);
var elem = jQuery(nodes[0]);

/** HTML文字列が入った変数 */

var html = '<div>...(途中略)...</div>';

var nodes = jQuery.parseHTML(html);

var elem = jQuery(nodes[0]);

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

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

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

var elem = jQuery(jQuery.parseHTML(html));

1	var elem = jQuery(jQuery.parseHTML(html));

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

/** HTML文字列をjQueryオブジェクトに変換する関数 */
function convertToJQObj(html){
  return jQuery(jQuery.parseHTML(html));
}

/** HTML文字列をjQueryオブジェクトに変換する関数 */

function convertToJQObj(html){

return jQuery(jQuery.parseHTML(html));

}

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

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

ここまでのまとめ

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

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

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

以上jQueryオブジェクトとHTML文字列を変換する方法についてでした。ではでは･△･)ﾉﾊﾞｲﾊﾞｲ