jQueryで、divをpに書き換えたいです

Question

クリックしたdiv要素を、p要素に書き換えたいです

div要素をクリックしたら、そのdiv要素のdata属性やclass、textなどはそのままに、「div」の部分を「p」に置き換えたいです。中のtextやclass、data属性の書き換え方法は調べるとたくさん見つかったのですが、divをpに変える方法がどうしても見つかりません。

書いたコード

//html
<div data-sample="hoge" class="div-class">text</div>

//jQuery
$(document).on('click','.div-class',function(){
  var i_am_div = $(this).clone(); //div要素をまるまるコピー。cloneが適切かわかっていません
  var i_am_p = i_am_div.replace('/div/u', 'p'); //正規表現で無理やりdivをpに書き換え
  $(this).after(i_am_p); //元のdiv要素のあとにpに変換したものを挿入
  $(this).remove(); //元のdiv要素を削除＝pに変換したものだけが残ることを期待
});

結果

期待していた結果は、以下の変化です。
クリック前：<div data-sample="hoge" class="div-class">text</div>
クリック後：<p data-sample="hoge" class="div-class">text</p>
しかし実際は、以下のエラーが返ってきました。
TypeError: i_am_div.replace is not a function at HTMLDivElement.

jQueryがまだよくわかっておらず、自身のコードのどこがいけないのか悩んでいます。

対象のdiv要素のdata属性やclass、textなどはそのままに、「div」の部分を「p」に置き換える方法をご存じの方がいらっしゃいましたら、どうかご教授いただけましたら幸甚に存じます。

何卒、よろしくお願い申し上げます。

Answer 1

要素を置換するreplaceWith/replaceAllメソッドがあります。
jQuery 要素を置き換える(replaceWith/replaceAll)

Comments

[yayak]

有難うございます！よく勉強しようと思います！

Answer 2

.clone()の返却値は要素そのものであって文字列ではないので、エラーメッセージの通りreplace()は機能としては持っていません。
もし親要素があるなら親要素の.html()から文字列として取得して.replace()というのはあるかもしれませんが、
いっそのこと新しい要素を作って同じ属性配置しては如何でしょう。

  var p = $('<p>',{'data-sample':$(this).attr('data-sample'),class:$(this).attr('class'),text:$(this).html()});
  $(this).after(p); 

Comments

[yayak]

非常にわかりやすく、理解できました！
新しい要素を作って同じ属性配置というのが、一番合理的なのかなと思いました。
有難うございます。心より感謝いたします<(_ _)>

[m.ts10806]

いえ、あくまで一例ですし、固定値でとってるので非効率極まりないと思っています。要件次第で幾らでもやり方は変わります。

[yayak]

そうなのですね＞＜
まだまだ勉強不足で、頭が下がります・・
有難うございました<(_ _)>

[m.ts10806]

NeRight719さんの回答をベストアンサーにしたほうが良いと思います。
私の場合は「書き換え」とは違うので（「置き換え」に近い）