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?

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?

• javascript
• jquery
• html
• dom

2 Answers 2

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.

Id selectors followed by Tag selectors are the best ones because they map directly to the native .getElementById() and .getElementByTag() methods

I would suggest that you always descend from the closest parent Id when you traverse the DOM. As in most languages there is always a readability/performance tradeoff that you will have to consider for your particular application.

Check out these performance guidelines for further insights

http://www.artzstudio./2009/04/jquery-performance-rules/