Jquery Selector Performance Advice?

Question

I have a very big single html page. I am performing data manipulation to that page. I am wondering if there is any best way for Jquery selector. like

$("#id").text("ABC");

Above statement searches for tags in my HTML page, since my HTML is very big. is there any performance tip for that ?

for ex:

Which one is faster ?

$(document).on("click", "#contactsTab", callback);

or

$("#contactsTab").on("click", callback);

Answer 1

If you're going to re-use $("#id") , I would store it in a variable and then use that. Otherwise, you're searching through the DOM each time for that element.

var $element = $("#id");
$element.text("ABC");

Answer 2

Searching by id is the fastest dom search. It might be nominally faster to do:

document.getElementById("id").innerHTML = "ABC";

Answer 3

An ID selector should have the most optimal of all jQuery selector performances. Ideally you should not have more than one element on the page having that id.