Is inserting and removing element to and from DOM expensive?

Question

Currently I am creating a tabular-like web UI. The tabs are placed at the top and they share same common area to display their relevant data.

I have three questions:

1. Is inserting and removing DOM element an expensive operation?

2. Can jQuery append() and remove() methods be used for inserting and removing DOM element respectively?

3. If they are expensive, what are the efficient alternatives such as show() and hide() or is there anything else?

Answer 1

"I was curious...is inserting and removing dom element an expensive operation?"

Most browsers will do it at no charge. Seriously though, any operation that causes the browser to repaint the page can be "expensive" if you do too much of it. Showing/hiding causes repaints too, but (without having tested it) I would expect it to be a bit faster than appending/removing.

The tab interface you describe would presumably involve adding/removing quite a few elements at a time though, which would be more expensive than simply showing/hiding a container div for each tab.

"are jquery append and remove methods inserting and removing dom element operation respectively?"

Yes. (If the method names don't make this obvious the documentation does.)

"if they are expensive, what are the efficient alternatives...show and hide, is there anything else?"

Using .show() and .hide() is my preference because it will likely make your JS much less complicated than if you have to append and remove. And as I already mentioned, for a tab type interface where you'd need to make groups of elements appear/disappear at once you can just show/hide a div that contains all the elements for the current tab. The child elements will show/hide with their parent.

Also with jQuery .show() and .hide() or other animation methods like .fadeIn() and .fadeOut() you can add some nice transitions between your tabs.

In a general sense, code the effect you want first, and worry about making it more efficient later if you find it doesn't perform well.