Javascript removeChild() and appendChild() VS display=none and display=block|inline
javascript
Solution
`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`
Problem
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?