下部にあるhtml要素を上部にも追記したい

Question

前提・実現したいこと

次のHTMLがあるのですが、システム内部のため書き換えられず、javascriptで追記できないかと思っています。

▼▼▼HTMLはこうなっている▼▼▼▼

<div class="ringo">りんご</div>
<div class="mikan">みかん</div>
<div class="meron">メロン</div>

▼▼▼実現したいこと▼▼▼▼

<div class="ringo">りんご</div>
<div class="meron">メロン</div>
<div class="mikan">みかん</div>
<div class="meron">メロン</div>

■■試したこと

$(function(){
    $('.ringo').after($('.meron'));
})

とafterメソッドを記述してみたのですが、これをすると上に移動してしまい既存の場所からはなくなってしまいました。

既存の場所は残しつつ別の場所に追加する方法する方法があればご教授いただきたいです。
よろしくお願いいたします。

Answer 1

クローンしてください

$('.ringo').after($('.meron').clone());

Comments

[Haru_CROSSHeart]

ありがとうございます！！！
cloneメソッド初めて知りました。無事実装できました。　
大変助かりました。ありがとうございます。