title: Why does call to jQuery's appendChild fail with undefined error?
body: <p>Here is my simple HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="myParentDivElement"&gt;
          Hello World!
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is the accompanying JavaScript:</p>
  
  <pre><code>$(document).ready(function() {
      var myDOMElement = document.getElementById("myParentDivElement");
  
      var newDivID = "div_1";
      var newDiv = $('&lt;div id="' + newDivID + '"/&gt;');
      $( newDiv ).css('marginLeft', '50px');
  
      var newSpanID = "span_1";
      var newSpan = $('&lt;span id="' + newSpanID + '"/&gt;');
      newSpan.text('myLabel');
      newDiv.appendChild(newSpan);   
      $( myDOMElement ).appendChild(newDiv);
  });
  </code></pre>
  
  <p>But when I run this code the line <code>newDiv.appendChild(newSpan);</code> gives the following error:</p>
  
  <pre><code>Uncaught TypeError: undefined is not a function 
  </code></pre>
  
  <p>Can someone explain why?
  Here is the JSFiddle showing that it doesn't work: <a href="http://jsfiddle.net/TsTMx/2/" rel="noreferrer">http://jsfiddle.net/TsTMx/2/</a></p>