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?
Julian HansenConnect With a Mentor Commented:
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.
leakim971Connect With a Mentor PluritechnicianCommented:
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
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,
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.