javascript removeChild() and appendChild() VS display=none and display=block|inline

Question

I'm developing a web application that shows some controls and descriptions dinamically (I don't want to use jQuery or other libraries). At this moment i make appear and disappear controls using:

element.setAttribute("style", "display : inline");

and

element.setAttribute("style", "display : none");

but i'm thinking about using:

element.appendChild(childRef);

and

element.removeChild(childRef);

So, which one is the best solution in terms of system speed and elegance of the code? (and of course, are there better solution?)

Answer 1

The first approach is better i think which just hides and displayes but does not remove from the DOM and add again.

Answer 2

element.appendChild(childRef); and element.removeChild(childRef); both make the browser to manipulate the DOM tree while changing CSS just changes one of the attributes.

So, changing CSS is faster.

---

Dev Opera says

When an element has its display style set to none, it will not need to repaint, even if its contents are changed, since it is not being displayed. This can be used as an advantage. If several changes need to be made to an element or its contents, and it is not possible to combine these changes into a single repaint, the element can be set to display:none, the changes can be made, then the element can be set back to its normal display.

This will trigger two extra reflows, once when the element is hidden, and once when it is made to appear again, but the overall effect can be much faster

---

Another relevant article explains about reflow and repaint

Answer 3

I would think that performance is better just updating the style.

The answer will depend on what you are using the elements for. If it is very dynamic whether they should be shown or not, it might be a solution to add/remove from DOM, but if there are a static set of elements, it might be easier to set the style. Setting the style, you also have more control of the position in the document. Adding/removing from DOM, you need to be sure it is added at the right place.

Note:
Instead of element.setAttribute("style", "display:none"); you can use element.style.display= "none"; If you use the first approach, you will remove any other style settings on the element.

Answer 4

I doubt there's much in it one way or the other, and even if there is, I bet it varies by implementation (IE vs. Chrome vs. Firefox vs. ...). Both will cause reflow events in the tree.

Showing and hiding is simple and straightforward. Adding and removing can have its uses, but for the most part is probably overkill. For one thing, you have to keep a reference to it so you can add it back later, and you have to remember where you need to add it back.

But (and this is a bit off-topic) your mechanism for showing and hiding has some issues:

1. With your example code, things can only be inline, not inline-block or block, which would be somewhat...limiting.

2. Your code also completely replaces the style information on the element (and may not work on IE; see David's comment on your question), so all other styles directly applied to the element will get blown away; consider using the style property of the element instead: childRef.style.display = 'none"; and childRef.style.display = "inline"; (or block, or...). That way, you don't bludgeon any other styles on the element.

Completely removing a child from the tree (while keeping a reference to it so you can put it back later) definitely has its uses, though. For instance, when it's not in the tree, it won't be found when you're walking the tree with selectors for doing this, that, and the other; which may be helpful.

Answer 5

I think editing the style of an element will be faster, but which is better hide the element or remove it from dom, this depends on your needs, if you need to just hide the element or remove it.
May be you don't need the user see the element but you need to do some js logic on it, so hide here will be the best.

Answer 6

A small aside: if you happen to be dealing with user editable elements in IE (i.e. inside a document with designMode "on" or inside an element with contenteditable true), setting the CSS display property to none won't have any effect, and you'll need to remove the elements from the DOM to hide them.

Answer 7

Definitely go on using display properties. They are much faster than removing/appending children, but most important they work very well in every browsers.

I know appendChild/removeChild are supposed to be well supported in IE, but sometimes on my IE7 a still get things moving around after a new element is appended (this is only my personal experience).

Regarding the way you change the display properties I would simply do a more easy and cross-browser (setAttribute is not well supported by IE6/7 an also IE8 when in IE7 mode):

element.style.display = 'none'; //for hiding an element
element.style.display = ''; //for showing that element again using its default way of displaying

Showing an element by using display = 'inline' is wrong because the element might have by default a display block way of showing like DIV tags and you are changing its way of showing to inline wich is not correct and might lead to elements in your page moving out from the places you expect them to be.