title: Why Doesn't jQuery.Find() Return a Collection of DOM Elements from a Document Fragment Cloned From an HTML5 Template?
body: <p>Why does <code>$input.size()</code> output <code>0</code> both times to the console given:</p>
  
  <pre><code>var $tr = $(CreateLiveNodeFromTemplate("#tplNewMember"));
  
  var $input = $tr.find("td input");
  
  console.log("Number of inputs found using find(): " + $input.size());
  
  $input = $tr.filter("td input");
  
  console.log("Number of inputs found using filter(): " + $input.size());
  </code></pre>
  
  <p>CreateLiveNodeFromTemplate() is defined as:</p>
  
  <pre><code>function CreateLiveNodeFromTemplate(tplSelector){
     var docFrag = document.querySelector(tplSelector).content; 
     return document.importNode(docFrag, true)
  }
  </code></pre>
  
  <p>The HTML5 Template:</p>
  
  <pre><code>&lt;template id="tplNewMember"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="radio" class="chkOwner"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;Member&lt;/td&gt;
          &lt;td&gt;&lt;a href="/scripts/Groups.RemoveMember.asp?id=&lt;%= objGroup.id %&gt;&amp;member=#" class="icon icon-delete"&gt;&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>I am testing in Firefox 57 and using jQuery 2.0.3.</p>