Java Reference
In-Depth Information
The second method,
removeClassName()
, removes the specified class from the element. The
following code removes the
class‐two
CSS class from the element:
$("myDiv").removeClassName("class-two");
Next is the
toggleClassName()
method, and it toggles the specified class. The following code
toggles the
class‐three
CSS class. If it is already applied to the element, the class is removed.
Otherwise, it is applied to the element:
$("myDiv").toggleClassName("class-three");
The final method,
hasClassName()
, checks if the specified class is applied to the element:
$("myDiv").toggleClassName("class-three");
Naturally, if the class exists, the
toggleClassName()
method returns
true
. Otherwise, it returns
false
.
These CSS methods are very similar to jQuery's CSS class manipulation methods, but Prototype's
methods for creating and inserting elements differ greatly from jQuery's methods. Removing
elements, however, is very similar to jQuery.
Creating, inserting, and removing elements
Prototype makes it easy to manipulate the DOM because it extends the
Element
object. Let's start
by creating elements.
Creating an element
Prototype adds a constructor for the
Element
object, and it accepts two arguments: the element's
tag name and an object containing attributes and their values. The following code creates an
<a/>
element and populates its
id
and
href
attributes:
var attributes = {
id = "myLink",
href = "
http://prototypejs.org"
};
var a = new Element("a", attributes);
The first few lines of this code create an object called
attributes
and define its
id
and
href
properties. They then create an
<a/>
element by using the
Element
object's constructor, passing
"a"
as the first argument and the
attributes
object as the second.
adding Content
Prototype extends element objects with two methods for adding content:
insert()
and
update()
.
The aptly named
insert()
method inserts new content at the end of the element. The following
code inserts the
a
object from the previous example into the document's body:
$(document.body).insert(a);
