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 ?
source to share
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.
source to share
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
source to share