Unexpected behaviour of jQuery html() and append()
<p>So here i am having a div created using normal HTML like this.</p>

<pre><code>&lt;div id="prop"&gt;&lt;/div&gt;
</code></pre>

<p>And by using jquery selector i am inserting html elements dynamically like</p>

<pre><code>var Container = $('#prop');
Container.html('&lt;p&gt;Hello World&lt;/p&gt;');
Container.append('&lt;p&gt;This is awesome&lt;/p&gt;');
Container.html('&lt;p&gt;Hello World&lt;/p&gt;');
Container.append('&lt;p&gt;This is awesome&lt;/p&gt;');
</code></pre>

<p>Here i am expecting the output like this.</p>

<pre><code>Hello World

This is awesome

This is awesome 
</code></pre>

<p>But the original output is </p>

<pre><code>Hello World

This is awesome
</code></pre>

<p>I cant understand why it is coming like this. Correct me if i asked anything wrong. Thanks in advance</p>