Question

I have an HTML page where I would like to add elements to a specific list, like so:

<div id="list-of-divs">
<div id="name-specific-id">
// content
</div>

<div id="another-id">
//content
</div>
.
.
.
<div id="yet-another-id">
</div>

Now I want to add new divs to that list, say with the following:

<div id="new-option-panel">
<input id="first-textbox-id" type="text">
<input id="second-textbox-id" type=text">
<button>Add new option</button>

Of course, the addition is done with jQuery code.

My question is: is it a good practice to add many such ids in HTML code and depend on them in my jQuery code, or is it a bad practice for both HTML and jQuery, and I should find other ways in my jQuery code (depending on DOM traversing, for example)?

Just for example of what I mean: will adding to many ids slow Javascript execution?

Answer 1

Id’s are faster to query but very tedious to maintain, so I’d take the “performance hit” and make my code more obvious by using classes and id’s only when necessary. In your example I would probably keep the id on the div but the input elements don’t need one, a simple class will do for both jQuery and CSS or even no class at all.