title: jQuery html element creation extremely slow in IE/Edge? Is there anything I can do?
body: <h2>Update: <a href="http://jsfiddle.net/7ccgaLuk/4/" rel="nofollow noreferrer">jsfiddle/v4</a></h2>
  <p>Silly typo in the demo had both executions running at 1000 rather than 10,000.</p>
  <p>At 10,000 Edge stalls out, which is what I'm seeing a lot of in my website. At 1,000, it just takes a few seconds.</p>
  <p>Still, after more than five solid minutes of waiting on Edge, I closed the process where chrome did it in less than 5 seconds.</p>
  <p>A sample run across the browsers mentioned has these results. The first number is the test that renders to the screen, the second number populates a jQuery-created element.</p>
  <pre class="lang-none prettyprint-override"><code>Browser:    To Screen   To jQuery-created element, not injected into DOM.
  IE/Edge:    Stalled out.
  Chrome:     4519        3757
  Firefox:    4032        4092
  Opera:      16925       16450
  </code></pre>
  <p>I experienced some crashes in these tests, because I don't think any browser likes tags nested 10,000 deep, but that's not at all what I'm actually doing anyway. I experienced no crashes with the test that writes to a jquery-created element, other than MS's browsers.</p>
  <hr />
  <p>I'm having a problem where IE 11 &amp; Edge both take an extremely long time when creating a large number of elements. Chrome/Firefox/Opera all execute the script unbelievably fast. Even my LG Optimus's Chrome browser doesn't struggle. But Edge/IE can take several minutes.</p>
  <p>For whatever it's worth, I'm on windows 10.</p>
  <p>I've created a very contrived example that nests the same element within itself 10,000 times and counts the length immediately after it's done.</p>
  <p>It isn't that it's taking the browser time to display the elements, as shown with the second button that takes an equal amount of time even though the elements aren't injected into the DOM.</p>
  <p><a href="http://jsfiddle.net/7ccgaLuk/3/" rel="nofollow noreferrer">jsfiddle/v3</a></p>
  <p>Is there anything I can do aside from the classic javascript route of <code>&quot;&lt;span&gt;&quot; + variable + &quot;&lt;/span&gt;&quot;</code>? It's just much cleaner to be able to to use the jQuery method.</p>
  <p>I have googled for this, but I haven't hit on the right combination of words if there are other posts on the topic.</p>
  <p>(jsfiddle/v4 code)</p>
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function () {
     $(&quot;#clk&quot;).click(function () {
         StartTime = new Date().getTime();
         var htm = $(&quot;&lt;span&gt;&quot;)
         for (var i=0; i&lt;10000; i++) {
             htm = $(&quot;&lt;span&gt;&quot;).append(htm);
         }
         $(&quot;#recip&quot;).html(htm);
         EndTime = new Date().getTime();
         TotalTime = EndTime - StartTime;
         alert(TotalTime + &quot;ms&quot;)
     });
     
     var $recip = $(&quot;&lt;div&gt;&quot;);
     $(&quot;#clk2&quot;).click(function () {
         StartTime = new Date().getTime();
         var htm = $(&quot;&lt;span&gt;&quot;)
         for (var i=0; i&lt;10000; i++) {
             htm = $(&quot;&lt;span&gt;&quot;).append(htm);
         }
         $recip.html(htm);
         EndTime = new Date().getTime();
         TotalTime = EndTime - StartTime;
         alert(TotalTime + &quot;ms&quot;)
     });
  });
  </code></pre>