Reading/Writing to/from HTML Elements via jQuery

Introduction: This tutorial is on how to read and write to/from HTML elements via jQuery. HTML: Before we can read/write to our HTML via jQuery, we first need our HTML... So now we have a basic division with the ID of 'myDiv' which we will use in our jQuery in a second. jQuery API: Now we need to include the jQuery libary files before we can begin using jQuery. We will simply get the latest API links from the official jQuery website (http://jquery.com/download/). Add these in the 'head' tags of your HTML file... jQuery Ready: Now we are ready to write our jQuery/Javascript. First we create our 'script' tags to put our javascript in. Again, this goes in the 'head' tags of your HTML file... Within our 'script' tags, we first create our document ready (shorthand) function... The above function automatically runs once the page is fully loaded, this avoids us having to create separate listeners and functions in order for me to explain the main purpose of this tutorial. Variables: Now, within our jQuery 'document ready (shorthand)' function, we are going to first of all declare our string that we are wanting to write to our div later. I call the variable 'content' for ease of use purposes... Now we are going to read our div's contents. First we make a reference to our div using it's ID 'myDiv'... After our element, we use dot notation (when you use a dot (.) followed by a function or property of the preceeding element, object or variable) to access the 'innerHTML' property of the HTML element. This will set our new 'readContents' variable's value to whatever text and other elements are within our first div with the id of 'myDiv'... Now we have read the contents of our 'myDiv' (ID) division to our new 'readContents' variable. Next we are going to write to the div - before that, let's just alert (messagebox/pop-up) the 'readContents' variable to ensure that it is gathering the information correctly... jQuery Write: To write to an element via jQuery, we can use the exact same property, but set it instead of just getting it instead. Here is an example; The above code would set the 'innerHTML' property (the contents) of the first division with the ID of 'myDiv' to our earlier defined variable 'content's value (I set it to 'Content written.'). Finished! Here is the full source code...