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
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. Read all published posts by

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
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. […]

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.

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()

sindhu
Guest
sindhu

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

sath
Guest
sath

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

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 »

7204004491
Guest
7204004491

How to write jquery form validation ….

Manju
Guest
Manju

How to write jquery form validation..