CODEWITHSUNDEEP
javascriptjqueryperformancejquery-selectorsgetelementbyid
Rafael Adel
Rafael Adel

Reputation: 7759

Use selectors from jQuery or JavaScript in this project?

I'm making a project that includes a lot of elements creation and appending, after a little research i came up with that

$(newElement) and $(selector)

are slower than

.createElement(newElement) and .getElementBy

Since i'm doing a todo-list app which will include a lot of creation/appending/selection of this :

<div class="mainTaskWrapper clearfix">
    <div class="mainMarker"></div>
    <label for="task1">This is task1</label>
    <div class="holder"></div>
    <div class="subTrigger"></div>                            
    <div class="checkButton"></div>
    <div class="optTrigger"></div>
    <div class="mainOptions">
        <ul>
            <li id="mainInfo">Details</li>
            <li id="mainDivide">Divide</li>
            <li id="mainEdit">Edit</li>
            <li id="mainDelete">Delete</li>
        </ul>                               
    </div>
</div>

What would you advise me to use ? jQuery selection and creation way, or JavaScript one ?

Upvotes: 0

Views: 132

Answers (4)

Blazemonger
Blazemonger

Reputation: 92893

I would advise you NOT to create that many identical elements all at once. Instead, place them once in your HTML and hide it (use display:none) and then use jQuery to .clone() the whole block as needed.

HOWEVER: First, get rid of those id= attributes. You can't have more than one element on a page with the same ID.

Upvotes: 0

DZittersteyn
DZittersteyn

Reputation: 628

When you say "a lot of creation/appending/selection", what exactly do you mean?

Is it in the order of several per second, or just "a lot"? Since the code will run client-side, one per second won't be that much of an issue.

jQuery would then be the 'best' choice, as maintainability is a large plus, and any code you write with jQuery will probably be a lot clearer.

Upvotes: 1

Brian Hoover
Brian Hoover

Reputation: 7991

It's really a developer preference issue.

Personally, I find strictly using jQuery selectors to be easier to write and understand, and more consistent when the selectors get more complex. Using native JavaScript is faster to compile and render, but you might not actually see any difference depending on the complexity of your page.

Upvotes: 1

Paul
Paul

Reputation: 36319

Depends a bit on what else you're doing. In some cases, setting innerHTML is the fastest (esp. with big bulky blocks getting inserted).

That said from a dev standpoint the jquery method is really the most maintainable. I'd probably go w/ the jquery version until performance becomes a problem, and wrap the calls to jquery in other functions that I can swap out when it does.

Upvotes: 1

Related Questions