About jquery append behavior
<p>I have the following code:</p>

<pre><code>$.getJSON('/api/video/',
      function (resp) {
          $("body").append("&lt;ul/&gt;");

          $.each(resp, function (key, value) {
              $("ul").append("&lt;li/&gt;").append(
                  $("&lt;a/&gt;", {
                      href: value.url,
                      html: value.title
                  }));
          });
      });
</code></pre>

<p>It produces:</p>

<pre><code>...
&lt;ul&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;a href="http://vimeo.com/1234567"&gt;How to Connect a Mobile Broadband Antenna to Data Card&lt;/a&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;a href="http://www.youtube.com/watch?v=q4Oknc8onG8"&gt;40000mW Laser vs. Line of Balloons!!&lt;/a&gt;
&lt;/ul&gt;
...
</code></pre>

<p>As you can see the <code>&lt;a/&gt;</code> are not inside <code>&lt;li/&gt;</code> and my question is why (is there a good reason for the behavior or does it just work that way)? In my world <code>$("ul").append("&lt;li/&gt;").append($("&lt;a/&gt;", ...))</code> adds the <code>&lt;a/&gt;</code> inside a <code>&lt;li/&gt;</code>. I see it as <code>$("ul").append("&lt;li/&gt;")</code> creates an <code>&lt;li/&gt;</code> inside the unorderd list and that the next append operates on the <code>&lt;li/&gt;</code> item and thus should add the link inside of it. However that is not the case and I wonder if there is a reason for that?</p>

<p>I am very grateful that you have taken time for my question!</p>
