پرسش نکته ای در jQuery

[SadraHkm 20]

سلام دوستان

امیدوارم حالتون خوب باشه

لطفا یه نگاهی به کد زیر بندازید

    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
    <button id="calcBtn">Calculate</button>
<div id="result"></div>
<script>
    $(window).ready(function () {
        $('#calcBtn').click(function (e) {
            $('p').each(function () {
                $(this).css('color','rgb('+ rand(0,255) +','+ rand(0,255) +','+ rand(0,255) +')');
                $('#result').append($(this).html());
      // -----------------  This Code :
              //$('#result').append($(this));
            })
        });
    })

</script>

در اون قسمتی از کد که دارم محتوی کدهای پاراگراف رو به تگ div اضافه میکنم یه سوالی ذهن منو مشغول کرده.

اگر همین کدی که الان هست رو اجرا کنیم، جی کوئری هربار توی حلقه رنگ تگ اصلی رو تغییر میده و یه کپی از اون پاراگراف میگیره و اضافه میکنه به div.

ولی اگه اون تکه کدی که کامنت هست رو با اون خط جایگزین کنیم، میاد و هر بار کلا تگ پاراگراف رو برمیداره و اضافش میکنه به div. یعنی دیگه کپی ازش نمیگیره و دیگه تگ های p اون بالا باقی نمیموند.

میخواستم ببینم آیا من درست فهمیدم ؟ یا مشکلی توی کد هست که اینجوری اجرا میشه ؟!

باتشکر فراوان