jQuery document ready method exercise

Download this page and open with Dreamweaver. Or right click and select "View Source", then cut and paste the code to Dreamweaver.

Task 1

Using the extension tasks undertaken in the selectors exercise, copy the functions you had written and paste them into a new JavaScript document (something.js). If you have not yet completed these extension tasks do that before attempting this.

Add a $(document).ready() block to the foot of this file.

Add a <script> tag to the <head> of this page. Use this to link to your new external .js file.

Inside the $(document).ready() block's blind function, create a new script to write the HTML which creates the buttons into the <div id="buttonBlock"> block below. The buttons tags are NOT to appear in the HTML source code (although you can place them there temporarily to check your linkage to the .js file). You will need to use the jQuery html() method documentation to help you do this.

hint: its more or less the same as using the innerHTML method.

Your code should run as before in the selectors exercise with the exception that this time the only presence any JavaScript or jQuery has in this HTML document is the <script> tag in the header.

Have jQuery write your button HTML here