Question about mixing JavaScript and jQuery code

I have a question about "optimal" code practices.  I am enhancing a website and have seen code like what's below - where the statement document.getElementById("xxx").innerHTML is commented out and replaced by $("xxx").html("yyyy")

Are the statements functionally equivalent?  Is there a reason to choose one over the other?


    if (document.getElementById("inp_newUserPassword1").value != document.getElementById("inp_newUserPassword2").value) {
      document.getElementById("row_newCustResponse").style.display = "block";
      $("#div_newcustmessage").html('Your passwords need to match');
/* sbw
      document.getElementById("div_newcustmessage").innerHTML = "Your passwords need to match";
sbw */
Dan PackerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

if you google "jquery" you should see the "The Write Less, Do More, JavaScript Library." that was on their site some days ago...

One of the jQuery was to be aware of browser compatibilities issue. Sometime a bunch of pure Javascript was not working on a browser or one day stop working for some reasons.

document.getElementById("xxx").innerHTML compared to $("xxx").html("yyyy") is lot of bytes for something doing the same thing and equivalent, cross browser

//document.getElementById("row_newCustResponse").style.display = "block";
$("#row_newCustResponse").show(); // itself same as : $("#row_newCustResponse").css("display","block");

Open in new window

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Open in new window

You can also open the jquery.js file (not the min.js) and read the javascript to learn lot of things.
jQuery is wrote with Javascript of course so you can mix without any issue
Julian HansenCommented:
You can find more about the jQuery library here

To expand on Leakim's post and to address your question

The answer is yes they do the same thing. The jQuery library enables developers to work more easily with the DOM, instead of having to write lots of JavaScript to find elements to act on jQuery gives you the means (through selectors) to find the elements (and perform actions on them) much more easily.

The two can be used together (and often are) so for instance a jQuery selector will return an array of elements in addition to the jQuery extended functionality. You can therefore use all the normal JavaScript properties and methods on the array elements returned by a jQuery selector.

Let's take your example of

Open in new window

This is jQuery for saying find all the elements with a tagname of xxx
If we wanted to find all elements with a classname of 'someclass' we would do this

Open in new window

And if we wanted the element with id 'someid' we would do this

Open in new window

Note the use of the '.' (for class) and '#' (for id) - same as for CSS
In each of the above we get an array of DOM elements.
We could now do this
$('#someid')[0].innerHTML = 'Some text'

Open in new window

And this would be the same as
$('#someid').html('Some text')

Open in new window

Which would be the same as
document.getElementById('someid').innerHTML = 'Some text'

Open in new window

Which would be the same as
$(document.getElementById('someid')).html('Some text')

Open in new window

In the last example we wrap the element returned by getElementById in a jQuery object which now gives us access to the jQuery functions we may want to perform on that element - so it is not just id's, classes and tags we can pass to jQuery - we can also pass elements.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dan PackerAuthor Commented:
Thanks to both of you for your answers.  Julian - I really appreciate your complete explanation - I learned a LOT in a short period of time.

Julian HansenCommented:
You are most  welcome Dan,
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.