Different between function calling in JavaScript and JQuery

A simple example to demonstrate how to call a function to create dynamic content after page loaded, both in JavaScript and jQuery.

1. JavaScript

To call a function after page loaded, JavaScript uses the “window.onload“, and “innerHTML” to create the content dynamically.


window.onload = function(){
 document.getElementById('msgid3')
         .innerHTML = "This is Hello World by JavaScript";
}

2. jQuery

To call a function after page loaded, jQuery uses the “$(document).ready“, and “html()” to create the content dynamically.


$(document).ready(function(){
 $("#msgid1").html("This is Hello World by JQuery 1<BR>");
});

Example


<html>
<head>
<title>jQuery Hello World</title>
</head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<body>

<script type="text/javascript">

$(document).ready(function(){
 $("#msgid1").html("This is Hello World by JQuery 1<BR>");
});

$(function(){
 $("#msgid2").html("This is Hello World by JQuery 2<BR>");
});

window.onload = function(){
 document.getElementById('msgid3').innerHTML = "This is Hello World by JavaScript";
}

</script>

This is Hello World by HTML

<div id="msgid1">
</div>

<div id="msgid2">
</div>

<div id="msgid3">
</div>

</body>
</html>
jquery-function-call-javascript

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
8 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
7 Comment authors
Manju7204004491saravansathsindhu Recent comment authors
newest oldest most voted
Manju
Guest
Manju

How to write jquery form validation..

7204004491
Guest
7204004491

How to write jquery form validation ….

saravan
Guest
saravan

Yong, I am facing an issue where cross domain parent page refresh is not happening.. I have xyz.com is my main website and i have a link to open a popup which will load the contents from http://www.abc.com.. And i have a button called close in the popup and when i click on close i need to close as well as i have to refresh the http://www.abc.com.. I have tried many ways to do through Javascript but i have ended up seeing an error “Access denied” in IE and mozilla no action is performed also.. Any thoughts?. Note: This xyz.com… Read more »

sath
Guest
sath

Your writing style is great , very clear and very clever.

sindhu
Guest
sindhu

i received “This is HelloWorld by HTML” this output only.

manivasakan
Guest
manivasakan

http://www.mkyong.com/jquery/different-call-between-javascript-and-jquery/
$(function(){
$(“#msgid2”).html(“This is Hello World by JQuery 2”);
});
this function didn’t call but output came….

Asha
Guest
Asha

$(function() in equivalent to $(document).ready(function()

Toby Lindelof
Guest
Toby Lindelof

Thanks for another wonderful post. Where else could anyone get that kind of info in such an ideal method of writing? I have a presentation subsequent week, and I’m at the look for such information.

trackback
jQuery Tutorials

[…] Call function in JavaScript and jQuery Demonstrate the different way of calling a function in JavaScript and jQuery to create dynamic content after page loaded. […]