Good HTML / JS Practice: Is It Good To Add Too Many IDs?

I have an HTML page where I would like to add items to a specific list, for example:

<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 a new one div

to this 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 helpful to add many of these id

to HTML and depend on them in my jQuery code, or is it bad practice for HTML and jQuery and should I find other ways in my jQuery code (depending on DOM movement, for example) ?

Simply, for example, I mean: Will id

Javascript add slow execution to many ?

+3


source to share


2 answers


Id is faster to query, but very tedious to maintain, so I would take a performance hit and make my code more obvious by using classes and id only when needed. In your example, I would probably store the id in a div, but the input elements are not needed, a simple class will work for both jQuery and CSS, or even any class at all.



+4


source


ID selectors followed by label selectors are the best because they map directly to native methods .getElementById()

and.getElementByTag()

I would suggest that you always descend from the closest parent id when you traverse the DOM. As with most languages, there is always a trade-off between readability and performance that you will need to consider for your particular application.



Check out these performance guidelines for further understanding

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

+1


source







All Articles