title: document.createElement Performance: Edge/IE11 too slow v/s Chrome/Firefox
body: <p>Some of the web portals that I maintain use <code>document.createElement</code> to create <code>options</code> in a <code>dropdownlist</code> at runtime. All was well till IE10 but in <code>IE11</code> or <code>Edge</code> suddenly the performance has gone down dramatically.</p>
  
  <p>I have created a Fiddle: <a href="https://jsfiddle.net/nitinph/ej5p65um/" rel="nofollow">https://jsfiddle.net/nitinph/ej5p65um/</a> </p>
  
  <p>Please run it using both the sets of browsers (IE11/Edge and Chrome/Firefox). You will notice that IE11/Edge takes 10+ seconds whereas Chrome/Firefox takes less than a second.</p>
  
  <p>My question is that is there any alternate way for using <code>document.createElement</code> so that performance is similar in IE11/Edge.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var pTime = document.getElementById("pTime");
  var d = new Date();
  var n = d.getTime();
  var ddl = document.getElementById("TestDDL");
  for (var i = 0; i &lt; 5000; i++) {
    var opt = document.createElement("option");
    opt.text = i;
    opt.value = i;
    ddl.options.add(opt);
  }
  d = new Date();
  var n1 = d.getTime();
  pTime.innerHTML = 'Time: ' + (n1 - n) / 1000 + ' sec.';</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="TestDDL"&gt;
  &lt;/select&gt;
  &lt;p id="pTime"&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Update</strong>: Courtesy <strong>@Squint</strong>, here are the four alternatives to achieve performance in IE11/Edge:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ddl = document.getElementById("TestDDL");
  
  console.time("html")
  var s = ""
  for (var i = 0; i &lt; 5000; i++) {
    s += "&lt;option value='" + i + '&gt;' + i + "&lt;/option&gt;"
  }
  ddl.innerHTML = s;
  console.timeEnd("html")
  
  clearContent()
  
  console.time("insertAdjacentHTML")
  for (var i = 0; i &lt; 5000; i++) {
   ddl.insertAdjacentHTML("beforeend", "&lt;option value='" + i + '&gt;' + i + "&lt;/option&gt;")
  }
  console.timeEnd("insertAdjacentHTML")
  
  clearContent()
  
  console.time("frag")
  var frag = document.createDocumentFragment();
  for (var i = 0; i &lt; 5000; i++) {
    var opt = document.createElement("option");
    opt.text = i;
    opt.value = i;
    frag.appendChild(opt);
  }
  ddl.appendChild(frag);
  console.timeEnd("frag")
  
  clearContent()
  
  console.time("direct add")
  for (var i = 0; i &lt; 5000; i++) {
    var opt = document.createElement("option");
    opt.text = i;
    opt.value = i;
    ddl.options.add(opt);
  }
  console.timeEnd("direct add")
  
  
  function clearContent() {
   while (ddl.firstChild) {
     ddl.removeChild(ddl.firstChild)
    }
  }
  
  clearContent()
  
  console.time("direct append")
  for (var i = 0; i &lt; 5000; i++) {
    var opt = document.createElement("option");
    opt.text = i;
    opt.value = i;
    ddl.appendChild(opt);
  }
  console.timeEnd("direct append")
  
  
  function clearContent() {
   while (ddl.firstChild) {
     ddl.removeChild(ddl.firstChild)
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="TestDDL"&gt;
  &lt;/select&gt;
  &lt;p id="pTime"&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>