When clearing HTML elements such as select boxes, tables, or lists, is it better/faster to remove the nodes (e.g., select.options.remove(i), table.deleteRow(i)) or just empty the innerHTML (e.g., select.innerHTML = "")? Or does it matter?

An example case would be reinitializing a table. A specific select field's value should load different values for a subsequent HTML table. When the select value changes, the table needs to be reinitialized.

When clearing HTML elements such as select boxes, tables, or lists, is it better/faster to remove the nodes (e.g., select.options.remove(i), table.deleteRow(i)) or just empty the innerHTML (e.g., select.innerHTML = "")? Or does it matter?

An example case would be reinitializing a table. A specific select field's value should load different values for a subsequent HTML table. When the select value changes, the table needs to be reinitialized.

• javascript
• dom

• IMO it depends whether you're planning to use them again, if you no longer need them then it would make sense to remove the nodes. I usually clear them instead as they often have an impact on the layout of a page. – JohnnyFaldo Commented Aug 6, 2013 at 15:57
• Let's say if you're reinitializing the table, for example, clearing everything, and starting new. – reformed Commented Aug 6, 2013 at 15:57
• 2 "Better" in performance terms? I encourage you to create a test on jspref.com and discover for yourself. – apsillers Commented Aug 6, 2013 at 15:57
• @apsillers The point of asking was to find people with experience and insight, not to be lazy. But thanks for the insinuation. – reformed Commented Aug 6, 2013 at 15:59
• "Or does it matter" -- in practically all real life situations, no. – JJJ Commented Aug 6, 2013 at 16:01

4 Answers 4

In IE you cannot set the innerHTML of a select element. So for a cross-browser solution the only way is to add/remove child nodes.

Case 1:- Run on 1000 Child DOM Element to Remove.

Which one is Faster?

1. Remove Child (5,676,264 ops/sec ±1.46%) --> Faster
2. innerHTML = "" (4,359,867 ops/sec ±1.46%) --> Slower

Case 2:- Which one is able to remove event handler of child Nodes?

1. Remove Child --> Able to remove event handler

2. innerHTML = "" --> Not able to remove event handler

Result:-

Seems It's better to used Remove Child for removing any child nodes.

Ref:- https://www.measurethat.net/Benchmarks/Show/6910/0/innerhtml-vs-removechild-vs-remove

https://rusingh.com/javascript-benchmark-removechild-vs-innerhtml/

I made a new test that isn't broken.

http://jsperf.com/innerhtml-vs-removechild/67

It's not perfect either since part of the sample setup is part of the test so this might skew the results.

This gives that innerHTML is faster but I don't know by how much.

Per this conversation here: What is the best way to empty an node in JavaScript

It appears that the while (elm.firstChild) {elm.removeChild(elm.firstChild);} approach got the the best results across browsers in this test.

(Would have put this as a comment instead of an answer, but the comments are coming in awful fast, so I didn't want it to get lost.)