タグの属性のみコピーしたものを複製したい

Question

タグの属性のみコピーしたものを複製したいです。

具体的には以下の構成で、

<div class="hoge">
<a href="XXXXXX" class="hoge2" 属性1 〜 属性6 >
<p>........</p>
<div>..........</div>
<span>..........</span>
</a>
<div class="hoge3"></div>
</div>

▼繰り返し

以下のように、連続する「hoge」内の「hoge2」の内部構成を抜いたaタグの属性のみをコピーしたものを「hoge3」の直前にコピーしたいです。

<div class="hoge">
<a href="XXXXXX" class="hoge2" 属性1 〜 属性6 >
<p>........</p>
<div>..........</div>
<span>..........</span>
</a>
<a href="XXXXXX" class="hoge2" 属性1 〜 属性6 >詳しく見る</a>
<div class="hoge3"></div>
</div>

▼繰り返し

複製されたaタグ内には「詳しく見る」という文字列を挿入したいです。

ご注意点としては、aタグにはhref・class意外に6つ程度の属性が付随するのでそれらも全て引き継ぎたいです。
また「hoge」要素は連続して存在し動的に数は変わります。

ご教授の程よろしくお願いいたします。

Answer 1

$(function(){
  $(".hoge2").each(function(){
    var copyAnchor = $(this).clone();
    copyAnchor.html("詳しく見る");
    $(this).after(copyAnchor);
  });
});

これでどうですかね

CodePen訂正しました。

Comments

[castail]

ご回答ありがとうございます。

せっかくご回答頂いたのに誠に恐縮ですが先にご回答頂いたLhankor_Mhy様をベストアンサーとさせて頂きます。

Answer 2

初めての回答なんで適切に答えられているかわからないですけど

HTMLがこれで

<div class="hoge">
  <a href="http://google.com" class="hoge2" data-attr1="one" data-attr2="two" data-attr3="three" data-attr4="four" data-attr5="five" data-attr6="six" >
    <p>Paragraph text</p>
    <div>Division text</div>
    <span>Span text</span>
  </a>
  <div class="hoge3"></div>
</div>

Javascript がこれです。

$(function(){
  $(".hoge2").each(function(){
    var copyAnchor = $(".hoge2").clone();
    copyAnchor.html("詳しく見る");
  
    $(this).after(copyAnchor);
  });
});

CodePenで実際に動かしてみました。

JSを説明していくと

これでA要素をコピーします。
コピーしなければ元の要素が移動されてしまいます。

var copyAnchor = $(".hoge2").clone();

コピーされたA要素の中身を変更します。

copyAnchor.html("詳しく見る");

最後にコピー元の直後に挿入します。

$(this).after(copyAnchor);

Comments

[castail]

ご回答ありがとうございます。
こちら「.hoge」が1つであればうまくいくのですが、「.hoge」は複数存在し、それぞれ1つづつに処理を加えたいのですが、その方法をお教え願えますか？

Answer 3

こんな感じで。

$('.hoge .hoge2').clone().empty().text('詳しく見る').insertBefore('.hoge3')

追記訂正
ちがった、こうですね。

$('.hoge').each(function(){
    var target = $(this);
    $('.hoge2', target).clone().empty().text('詳しく見る').insertBefore($('.hoge3',target));
});

Comments

[castail]

ご回答ありがとうございます。
こちら「.hoge」が1つであればうまくいくのですが、「.hoge」は複数存在し、それぞれ1つづつに処理を加えたいのですが、その方法をお教え願えますか？

[Lhankor_Mhy]

すみません、訂正した方のコードであれば動作すると思います。

[castail]

ご回答ありがとうございます。

ご教示頂いた内容でうまく動作いたしました！
誠にありがとうございました。