サーバーサイドで生成したHTML文字列を、JavaScript側でjQueryを使用してDOMに変換した後にクラスを付与したかった。

付与するクラスは飽くまでJavaScript側での識別用のものとして利用したいため、（サーバーサイドで生成される）ドキュメント上のHTML文字列には直接書きたくない。

 

jQueryを使用してHTML文字列をDOM化する際、元となるHTML文字列をDOMのオブジェクトとして扱うために、以下のサンプルコードのようにして変換するのは割と有名な話。

var str = '<div id="main"><p>a</p></div><div id="sub-1"><p>b</p></div><div id="sub-2"><p>c</p></div>';
str = $(str);

 

ただ、今回は上記の変数strの中身はサーバーサイドで生成する兼ね合いでそのままとしておくのでいくらクラスを付与したいとは言え変数strの直接変更は禁止。JavaScript側での識別用として扱うのならなおさらである。

そのような条件下で、HTML文字列をDOMオブジェクトに変換した後にクラスを付与して、最終的にDOM上で以下の例のような形にしたい。

<div id="main" class="identify-element"><p>a</p></div>
<div id="sub-1" class="identify-element"><p>b</p></div>
<div id="sub-2" class="identify-element"><p>c</p></div>

 

これを実現するためには、addClassメソッドを利用して以下のように書く必要がある。

var str = '<div id="main"><p>a</p></div><div id="sub-1"><p>b</p></div><div id="sub-2"><p>c</p></div>';
str = $(str).addClass('identify-element');

 

これにより、記事題のとおりの内容を実装できる。

 

 

 

・・・ついでなのでちょっとだけ離れた話。

 

HTML文字列をDOMとした際は、通常通りjQueryでのDOMの操作が利く。（オブジェクトとなっているので当然といえば当然だけど・・・笑）

var str = '<div id="main"><p>a</p></div><div id="sub-1"><p>b</p></div><div id="sub-2"><p>c</p></div>';
str = $(str);
str.eq(0).children('p').addClass('identify-element-paragraph');

上記例は、<div id=”main” />内のpタグにidentify-element-paragraphのクラスを付与する場合。