【JS】タグの変換処理（<a>を<p>にしたい）

Question

前提・実現したいこと

.cloneするときに<a>を<p>に変換したいです。

該当のソースコード

こちらです。コピーのクリックで要素がコピーされますが、そのときに<a>やそのhrefを削除し、代わりに<p>に置き換えたいです。

<div id="first">
  <div class="inner">
    <ul>  
      <li><a>1</a></li>
      <li><a>2</a></li>
    </ul>
  </div>
</div>

<button type="button">コピー</button>

<div id="second">  
</div>

<script type="text/javascript">
$(function(){
  $('button').on('click',function(){
    var elem = $('#first ul');	
    var dummy = $('<div>');
    dummy.append(elem.clone(true));
    var html = dummy.html();  
    const second = `
      <div class="inner">
      	${html}
      </div>
    `;
    $('#second').html(second);
  });
});
</script>

うるさい注文ですみませんが、バッククオートを使うあたりの処理は変えたくないです。

理想的には

var html = dummy.html();
${html}
の部分を

var html = dummy.html();
var html_p = <a>を<p>に変換;
${html_p}
のような処理にできればわかりやすいのですが、

そんな都合よくいきますか？

いろいろ方法を知りたいです。

Answer 1

var clone = elem.clone(true)
clone.find('a').replaceWith(function() {
  return "<p>"+this.innerHTML+"</p>";
})

書いてる間に回答があったようですが、
せっかく書いたので、置いておきます。

Comments

[takahapi]

ありがとうございます！すみませんが使い方がよくわからず、こう（https://jsfiddle.net/wg5498hr/1/）ではないですよね？

[退会済みユーザー]

作成したcloneのaタグをpタグに変更する処理です。

なので
dummy.append(elem.clone(true));
部分を、作成したcloneをappendするように変更します
dummy.append(clone);

冗長な処理があるので、きれいにすると、最終的にはこのようになります。
https://codepen.io/anon/pen/axmNLN

[takahapi]

どうもありがとうございます！なるほどすっきりしましたね！

[退会済みユーザー]

あっ、最後
$('#second').html(dummy);
ではなく、
$('#second').append(dummy);
の方が意味的にはいいと思います。

[takahapi]

あー！ははー！わかりやすいかもですね。なるほど、可読性っていうのはそういうことなんですね。

Answer 2

こんなかんじ？

$(function(){
  $('button').on('click',function(){
    var elem = $('#first ul');
    var dummy = $('<div>');
    dummy.append(elem.clone(true));
////////////////////////////////////////////////////////////
    dummy.find('a').each((_, e) => { // 中の <a> 全部に対して
      $e = $(e);
      $e.after($('<p>').html($e.html())); // <a> の直後に <p> を追加して a の中身だけ放り込む
      $e.remove(); // <a> を削除する
    });
////////////////////////////////////////////////////////////
    var html = dummy.html();  
    const second = `
      <div class="inner">
          ${html}
      </div>
    `;
    $('#second').html(second);
  });
});

Comments

[takahapi]

わすげぇｗｗどうもありがとうございます！

dummy.find('a').each((_, e) => { // 中の <a> 全部に対して
$e = $(e);

ここ↑わけわからないんですが、どこかネットに情報ありませんでしょうか？

特に
.each((_, e) => {

いったいどういう名前の処理ですか？

[mypt]

each は要素全部にメソッドを適用するっていうもので for より軽いのでわりとよくつかう構文ですが
慣れてないと難しいのかも

const a_list = dummy.find('a');
for(const e in a_list) {
$e = $(e);
...
と同じことです
}

a_list の各要素に対して
function f = (_, e) {
...
}
を適用するっていう書き方になります

[takahapi]

それは楽ですね！重ねてお礼申し上げます！！