Adding createElements - text and Value without the necessary forLoop to the Array.
Tried map, forEach, but memory wise...it is still lagging with numerous entries.
Please help.
templateList example: ["a", "b", "c", "d", "e", "f"];
var templateList = new Array();
var selection = document.getElementsByName("name")[0];
for(var i = 0; i < templateList.length; i++) {
var open = document.createElement("Option");
open.text = templateList[i];
open.value = templateList[i];
selection.add(open);
}
you might get a little better performance using a DocumentFragment to build your options and render them all at once into the dom. I´d say there is no non-iterative way
Because all of the nodes are inserted into the document at once, only one reflow and render is triggered instead of potentially one for each node inserted if they were inserted separately.
var templateList = ["a", "b", "c", "d", "e", "f"];
var selection = document.getElementsByName("name")[0];
var opts = new DocumentFragment();
for(var i = 0; i < templateList.length; i++) {
var open = document.createElement("Option");
open.text = templateList[i];
open.value = templateList[i];
opts.appendChild(open);
}
selection.appendChild(opts);<select name="name">
</select>I tested with js-bench and got only minimal advantage (+- 5%) though theoretically it should be less "lagging"
You can create all option string and then add it to innerHTML of selection. This will be very efficient compared to your solution.
const templateList = ["a", "b", "c", "d", "e", "f"],
selection = document.getElementsByName("name")[0],
options = templateList.map(v => ` <option value="${v}">${v}</option>`).join('');
selection.innerHTML = options;<select name="name"></select>