Using createElement('option') vs Using new Option()

Edit on GitHub

Datalist: dynamically add options

Setup

var datalist = document.createElement( 'datalist' );
var elements = [];
for ( var i =0; i<10000; i++){
  elements.push({
    value: 'value: ' + i,
    text: 'name of ' + i
  })
}

Tests

  • Using createElement('option')

    var newList = document.createDocumentFragment()
    elements.reduce( function( docFrag, element) {
      var o = document.createElement('option')
      o.value = element.value
      o.appendChild(document.createTextNode(element.text))
      docFrag.appendChild(o)
    
      return docFrag
    }, newList )
    datalist.appendChild( newList )
  • Using new Option()

    var newList = document.createDocumentFragment()
    elements.reduce( function( docFrag, element) {
      docFrag.appendChild(new Option( element.text, element.value))
    
      return docFrag
    }, newList )
    datalist.appendChild( newList )