title: Insert a whole element into another element, not just its inner HTML
body: <p>I'm trying to figure out how to use jQuery to construct HTML as sanely as possible. As far as I can tell, this should produce <code>&lt;div&gt;&lt;span&gt;Alice&lt;/span&gt;&lt;/div&gt;</code>, but instead produces <code>&lt;div&gt;[object Object]&lt;/div&gt;</code>:</p>
  
  <pre><code>post = $("&lt;div&gt;");
  username = $("&lt;span&gt;").html("Alice");
  post.append(username);
  </code></pre>
  
  <p>I've found that replacing the last line with <code>post.append(username.html())</code> gets me closer to my goal, but it omits the <code>&lt;span&gt;</code> tags if I do it that way. How do I insert a child element with the surrounding tags, and without writing out <code>"&lt;span&gt;" + username + "&lt;/span&gt;"</code>, which seems like a novice approach to the task?</p>
  
  <p><strong>EDIT:</strong> Stupid mistake. The snippet I posted above was excessively simplified; I was really trying to do <code>post.append(username + another_span_element)</code> in my code. Obviously I can't append objects like that. I've changed it to <code>post.append(username); post.append(another_span_element);</code> and now it works fine. Durr!</p>