Wednesday, 18 September 2013

Using append() from Jquery outside the HTML document

Using append() from Jquery outside the HTML document

I am trying to use Jquery in a separate .JS file since keeping all
JavaScript code out of the HTML document will increase the performance of
loading the HTML document.
For this example I am using "index.html" and "main.js"
Below is index.html:
<html lang="en">
<head>
<meta charset="utf-8">
<title>append demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="testJS/main.js"></script>
</head>
<body>
<p>I would like to say: </p>
<!-- CODE BELOW MUST BE REMOVED FROM THIS DOCUMENT -->
<script>
$( "p" ).append( "<strong>Hello</strong>" );
</script>
</body>
</html>
I would like to cut the code from the html and insert it into main.js
however the example below did not work for me:
main.js:
p.append( "<strong>Hello</strong>" );
I've also tried this with no success:
$( "p" ).append( "<strong>Hello</strong>" );
How could I fix this and what is the difference between having JavaScript
inside and having it inside a .js file?

No comments:

Post a Comment