[解決済み] jQuery を使ってタグを別のものに置き換える

質問

ゴール

jQueryを使用して、私はのすべての出現を置き換えるしようとしています。

<code> ... </code>

を使っています。

<pre> ... </pre>

私の解決策

というところまでたどり着きました。

$('code').replaceWith( "<pre>" + $('code').html() + "</pre>" );

私の解決策の問題点

の間にあるコンテンツが、(2番目、3番目、4番目などの)"code"タグの間のすべてに置き換えられていることが問題なのです。 最初の "code"タグの間の内容で置き換わってしまうことです。

例

<code> A </code>
<code> B </code>
<code> C </code>

になる

<pre> A </pre>
<pre> A </pre>
<pre> A </pre>

私は"this"と何らかの関数を使用する必要があると思いますが、私はまだ勉強中で、解決策をまとめる方法をよく理解していないのが怖いのです。

どのように解決するのですか？

関数を .replaceWith ^{[ドキュメント] (docs)} :

$('code').replaceWith(function(){
    return $("<pre />", {html: $(this).html()});
});

関数の内部で this は、現在処理中の code 要素を指します。

DEMO

更新しました。 そこにあるのは 大きな性能差はありません ということですが、万が一 code 要素に他の HTML 子要素がある場合、それらをシリアライズするのではなく、子要素を追加する方がより正しいように感じます。

$('code').replaceWith(function(){
    return $("<pre />").append($(this).contents());
});