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

Question

I'm developing a web application that shows some controls and descriptions dynamically (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? Or is there a better way to go about this?

Answer 1

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 2

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.