jQueryのcontents

社内のSkypeで、こんなお題があがってきて、へーと思ったのでメモ。

下記DOMから、DOM的操作で「piyo」という文字列を抽出しなさい。

<div id='hoge'>hoge<span>foo</span><span>bar</span>piyo</div>

正規表現とか使わずに、jQueryのDOM操作でどうやるかってーとこうなるらしい。

$("#hoge").contents().last().text(); //=> piyo

contensはテキストノードも含めた、ノード一覧を返してくれるので、「hoge」テキストノード, spanタグノード、「piyo」テキストノードを返してくれるらしい。なるほど。

ae42++

DOMの中身ではなく、DOM自体を入れ替える

これは、なんどかやってすぐ忘れるから単なるメモ。例えば、こんな感じのdivがあるとする。

<div id='hoge'>
bucho is love
</div>

この中身の「bucho is love」だけを書き換えたい場合には、「$('#hoge').html()」で書き換えればいいけど、「id='hoge'」のdivタグを含めて、まるっと入れ替えたい時がある。としよう。

そんな場合はこうすればいける。もっとスマートな書き方はあるだろうけど、単純に、そのdivタグの前か後ろに、書き換え用のdivを挿入して、もとあったdivを消してやればいい。

  #追記 これ駄目な。↓ 追記のreplaceWithでいい。
  $('#hoge').after("<div id='hoge'>love is bucho</div>");
  $('#hoge).last().remove();  //first()でも一緒、afterで追加した要素は、一連のJSプロセス？終了するまで、反映されないっぽい。

そんなある日のJS話ですた。

追記

monjudoh 先生 がコメントで教えてくれたけど、「replaceWith」でいいそうな。ブログに書いてよかた。過去に書いたヤツ、直しておいてください(誰か

  $('#hoge').replaceWith("<div id='hoge'>love is bucho</div>");