Adding Text and Value to Array from CreateElement

Question

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);
}

What exactly is the problem? Does templateList already contain values? Given your templateList array, the code may be able to be shortened to const selection = document.querySelector(".name"); templateList.forEach((value) => selection.add(new Option(value, value)));. See Option. — Sebastian Simon
– Sebastian Simon, Commented Aug 3, 2021 at 16:36
Yes they are strings. The problem is the for loop has to iterate over and over again. Want to try to find a way to not have to do that..... it is iterating for too many variables in the templateList array. — HelloItsMe
– HelloItsMe, Commented Aug 3, 2021 at 16:39
Why does it have to iterate over the values (not variables) over and over again? — Sebastian Simon
– Sebastian Simon, Commented Aug 3, 2021 at 16:41
i guess putting the selection.add out of the loop and add a nodelist after the loop instead could increase drawing performance — john Smith
– john Smith, Commented Aug 3, 2021 at 16:43

john Smith · Accepted Answer · 2021-08-03 17:18:52Z

2

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"

edited Aug 3, 2021 at 17:18

answered Aug 3, 2021 at 17:10

john Smith

18k12 gold badges80 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hassan Imam · Accepted Answer · 2021-08-03 17:21:41Z

2

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>

answered Aug 3, 2021 at 17:21

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

Collectives™ on Stack Overflow

Adding Text and Value to Array from CreateElement

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related