Difference between document.getElementByID and jQuery('#id').val?

Question

Dear StackOverflow community,

I am new to jQuery and Javascript, and was wondering what the main differences between these two functions are:

document.getElementById('id').innerHTML      =variable;

and

jQuery('#id').val(variable);

From my understanding, they are two different coding techniques, but when would I use one over the other? and why?

Refer http://stackoverflow.com/questions/2340412/jquery-vs-javascript — AyB, May 18 '14 at 06:30

score 3 · Answer 1 · answered May 18 '14 at 06:33

The two above examples are slightly different, but not in the way you're expecting.

innerHTML and .val() are not equivalent methods.
jQuery will try to use querySelector / querySelectorAll where appropriate when using the DOM selection jQuery("SELECTOR"). These are native methods, so look into them.
.val(variable) will set the value of the node found by jQuery("SELECTOR") to variable
innerHTML = variable will set the the HTML content of document.getElementById('id') to whatever variable is.

.val() - Set the value of each element in the set of matched elements.

innerHTML - innerHTML sets or gets the HTML syntax describing the element's descendants.

@user3649082 - Awesome, I'm glad you found it useful =) – Chase May 18 '14 at 06:44 — Chase, May 18 '14 at 06:44

1 Answers1