jQuery 親要素をもう一度表示したいのですが、

Question

前提・実現したいこと

子要素をクリックすると、親要素を複製したいのですが、この方法だと非効率のため、
何かいい方法があれば、ご教示お願い致します。

該当のソースコード

<div id="new">
</div>
<div id="big_area">
    <p>おはよう</p>   
    <div id="midium_area">
        <p> こんにちは　</p>
        <div id="small_area">
            <p id="miss">ざーっす</p>
         </div>
     </div>
</div>

###js

$(function(){
    $('#small_area').on('click', function(){
        $('#new').append('<div id="big_area"><p>おはよう</p><div id="midium_area"><p> こんにちは　</p><div id="small_area"><p>こんばんわ</p></div></div></div>')
    });
});

Answer 1

効率は良くありませんが、

$('#new').append('<div id="big_area"><p>おはよう</p><div id="midium_area"><p> こんにちは　</p><div id="small_area"><p>こんばんわ</p></div></div></div>')

これがベストだと思いました。

もしくは、cloneしてidを変更して、追加したい要素をappendする。

Answer 2

どうでしょう

$(function(){
    $('#small_area').on('click', function(){
        $('#new').append($(this).parent().clone())
    });
});

Comments

[shuring]

クローンして、<div id="small_area">の子要素を変更したいのですが、どうしたらいいですか？

[wai_]

> クローンして
何をクローンするのですか？

>子要素を変更
どのように変更するのですか？

[shuring]

<p >ざーっす</p> を<p>こんばんわ</p>に変えたいです。