JQuery $('<div></div>') doesn't create proper div element
<p>I have the following js code:</p>

<pre><code>$(document).ready(function() {
    $(".button").bind("click", function() {
        var div = $('&lt;div&gt;&lt;/div&gt;');
        $(".label").append(div);
        div.html($(".textField").val());
        console.log(div);
    });
});
</code></pre>

<p>with html:</p>

<pre><code>&lt;input type="text" class="textField"/&gt;
&lt;input type="button" class="button" value=" &amp;gt;&amp;gt;"/&gt;
&lt;div class="label" style="color: red;"&gt;&lt;/div&gt;
</code></pre>

<p>and when I click the button, nothing happens. Console output shows that created <code>div</code> is not a proper div object.<br>
But when I copy onclick function handler code into browser console and run it, it works properly. <br /> Here is <a href="https://jsfiddle.net/ashishbpatil1/tLbv5m3q/" rel="nofollow">jsFiddle</a>. <br />
What is wrong here?</p>