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