Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS
■ Note The preceding example uses single quotation marks to enclose the string of HTML rather than double
ones. This has no effect on the jQuery function; it merely eliminates the need to escape the double quotes used in
the class attribute (e.g., class=\"bat\").
As of jQuery 1.4, you can also add attributes to this new element by passing a second argument as
JavaScript Object Notation (JSON) 2 :
$("", {
"class":"bat",
"text":"This is a new paragraph!"
});
The result of the above code snippet is the following:
>>> $("", { "class":"bat", "text":"This is a new paragraph!" });
[ p.bat ]
Because this is only creating the element, it hasn’t been attached to the DOM yet and, therefore,
isn’t visible in the browser window. You’ll learn to insert new elements in the next section, “Inserting
New Elements into the DOM.”
■ Note At its simplest, JSON is a key-value pairing where both the key and value are surrounded by quotation
marks and all key-value pairs are comma-separated and enclosed in curly braces ({}). A sample of JSON data
would be { "key":"value" } or { "key1":"value1", "key2":"value2" }.
Inserting New Elements into the DOM
Now that you have a basic understanding of how to create new elements, you can begin learning how to
insert them into the DOM. jQuery provides several methods for handling this, which you’ll explore in
this section.
An important note to make here is that the modification of the DOM is temporary, meaning that any
changes made will be reset back to the original HTML document once the page is refreshed. This
happens because JavaScript is a client-side language, which means it isn’t modifying the actual files from
the server, but the browser’s individual interpretation of the file.
2 http://en.wikipedia.org/wiki/Json
39