get html of div and append same content to div but with only first element
<p>I am not having much more hands on jquery.
i want to take a content of div and append same content to div but it adding multiple items.</p>

<p>May be this code explain my question clearly.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$(document).ready(function(){
    $("button").click(function(){
        var data = $('#xyz').html();
        $(data).appendTo("#xyz");
    });
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;span id="xyz"&gt;&lt;p&gt;Test&lt;/p&gt;&lt;/span&gt;
&lt;button&gt;ADD&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I am taking content of selector xyz and adding content to same selector which is working but its adding double time.</p>

<p>Current output</p>

<p>Test</p>

<p><strong>Add</strong></p>

<p>after clicking Add output will be </p>

<p>Test</p>

<p>Test</p>

<p><strong>Add</strong></p>

<p>Again after clicking Add output will be </p>

<p>Test</p>

<p>Test</p>

<p>Test</p>

<p>Test</p>

<p><strong>Add</strong></p>

<p>but i want it to be </p>

<p>Test</p>

<p>Test</p>

<p>Test</p>

<p><strong>Add</strong></p>

<p>not 4 Test only 3 Test</p>

<p>can any one help me to sort out this.</p>