指定のdivやHタグの内側にspanを挟むjQueryテクニック

やりたいこと

例えば「section-head」というclassが付与されたh3タグを見出しとして使っているとしよう。

<h3 class="section-head">見出しです！</h3>
<p>文章をここに。文章をここに。文章をここに。文章をここに。文章をここに。</p>

デザインの都合などの理由から、その内部にspanを挟みたいとする。
以下のように。

<h3 class="section-head"><span class="inner">見出しです！</span></h3>
<p>文章をここに。文章をここに。文章をここに。文章をここに。文章をここに。</p>

だが、既に見出しが何十箇所も使われていたのなら、いちいち変更するのも骨が折れる。
jQueryをうまく使い、一括変換できればハッピーだ。

jQueryでspanを挟み込む

$('h3.section-head').wrapInner('<span class="inner"></span>');

このように記述することで、自動的にspanを挟むことができる。