Good practice when manipulating HTML controls via Javascript

Question

What is a good way to manipulating HTML controls?

By creating HTML element?

var select = document.getElementById("MyList");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.Text = opt;
    el.value = opt;
    el.innerHTML = opt;
    select.appendChild(el);
}

Or by manipulating HTML:

    var options = new Array(2);
    options [0] = '1';
    options [1] = '2';

    options [0] = '<option>' + options [0] + '</option>';
    options [1] = '<option>' + options [1] + '</option>';

    var newHTML = '<select>' + options [0] + options [1] + '</select>';
    selectList.innerHTML = newHTML;

Which one of these is a good practice? Is one preferred over other in specific conditions?

Will that help:- http://msdn.microsoft.com/en-us/library/hh404083.aspx ? — Rahul Tripathi, Aug 12 '13 at 19:57
It depends. What specific problem are you trying to solve? Most times one would want to define the control in html, so the second alternative would seem more suitable, but without knowing what you're trying to do one can't be 100% sure. — Geeky Guy, Aug 12 '13 at 19:58
Not to be a debbie downer but I feel this question is primarily opinion-based — Dom, Aug 12 '13 at 19:59
@Renan yes, I think it comes down to whether you want to define the control in html or not. When should one prefer defining the control in HTML? — user793468, Aug 12 '13 at 20:03
@Dom as long as we don't know the specifics about the problem OP is trying to solve, I agree with you. — Geeky Guy, Aug 12 '13 at 20:05
it depends on what you're doing. if it's a small project, it doesn't really matter. if you're designing a larger project or web app: neither. use a framework like angularjs and do it all in javascript without touching the dom. — user428517, Aug 12 '13 at 20:05
Seems that using innerHTML is faster http://jsperf.com/innerhtml-vs-createelement-test — Loris, Aug 12 '13 at 20:10
possible duplicate of [JavaScript: Is it better to use innerHTML or (lots of) createElement calls to add a complex div structure?](http://stackoverflow.com/questions/737307/javascript-is-it-better-to-use-innerhtml-or-lots-of-createelement-calls-to-ad) — gilly3, Aug 12 '13 at 20:15
Great answer here: http://stackoverflow.com/a/7393126/361684 — gilly3, Aug 12 '13 at 20:18
@user793468 first method is better .. it is much smoother.. see my answer below. — woofmeow, Aug 12 '13 at 20:26

score 4 · Answer 1 · answered Aug 12 '13 at 20:07

4

1st approach looks more modular and reusable. You may want to put the lines within for loop in a method and call that method.

answered Aug 12 '13 at 20:07

I can always make the 2nd approach more modular and reusable. Thanks! for the info – user793468 Aug 12 '13 at 20:14
@user793468 you need to consider other things too .. not just modularity ... let me know if i can improve the my answer. – woofmeow Aug 12 '13 at 20:44

score 1 · Accepted Answer · answered Aug 12 '13 at 20:12

1

Always 1st approach. if you are using innerhtml style, browser is creating itself.

answered Aug 12 '13 at 20:12

mccakici

550
3
7

Arnt we creating browser by approach 1 too? "el.innerHTML = opt;" – user793468 Aug 12 '13 at 21:15
Sorry i didn't see. you don't need el.innerHTML = opt; el.Text = opt; change to el.text = opt; – mccakici Aug 12 '13 at 21:30
Dont see the options in list if I remove el.innerHTML – user793468 Aug 12 '13 at 21:40
http://jsfiddle.net/CbQ94/ – mccakici Aug 12 '13 at 21:47
Works in Chrome, not in IE. Tried deleting cookies but still doesnt work. Seems like an isolated issue. Will look into it more – user793468 Aug 12 '13 at 22:08

woofmeow · Answer 3 · 2013-08-12T20:35:50.537

The first method is better than the second one , i.e.,

**Creating an HTML element is better than manipulating the DOM"

The reason: being working with DOM can cause browser reflow.

For example : assume you need to replace an element to the DOM which already exists.

Using approach :

Creating a DOM Element : You create an element. Add verious attributes to it and replace it. The element will be added in one go and there will be only one reflow of the document.
Manipulating DOM : You need to add and remove attributes or elements one by one. This may cause the browser to trigger a reflow for all the elements and attributes that are being manipulated. This will take up valuable resources in rendering the flow of the document as the elements are manipulated.

So creating a dom element is much smoother since your browser wont have to render the flow of the document again.

*EDIT : * If you need to insert many elements then the best approach is to create a Document Fragment. The document fragment is in memory and not part of the DOM tree. Thus adding elements to it DOES NOT cause reflows. As the documentations says :

Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element's position and geometry). Consequently, using document fragments often results in better performance.

Good practice when manipulating HTML controls via Javascript

3 Answers3

Linked