PhpRiot
Become Zend Certified

Prepare for the ZCE exam using our quizzes (web or iPad/iPhone). More info...


When you're ready get 7.5% off your exam voucher using voucher CJQNOV23 at the Zend Store

Eight Weeks of Prototype: Week 2, How Prototype Extends Elements

Reading and Writing an Element's Content

In this section I will show you firstly how to update the inner content of an element using Prototype. There may occasions where you need to read the content rather than write it, so I will also show you how to do that.

After this I will show you how to read and write attributes. Writing attributes is extremely when including a particular attribute in your HTML source will break the page's standards compliance. That is, this technique is most useful for managing non-standard attributes.

Updating the Content of an Element

To update the content of an element, the update() method is called on that element. This method takes either no arguments or exactly one argument. If no arguments are specified, then the content of the element is cleared. Otherwise, the content of the element is updated to be whatever is specified as the first argument.

When calling update(), there are several different types of data you can use as the first argument in order to update the content of the given element. That is, you can pass plain text, a HTML snippet, or you can pass a JavaScript object (this includes elements created by instantiating the Element class, as shown in the first article of this series).

Listing 1 shows a basic example of using update() to clear the contents of an element. In this example, the div begins with some text content but when you view the page this content no longer exists.

Listing 1 Clearing the content of an element using update() (listing-1.html)
<html>
    <head>
        <title>Clearing the content of an element using update()</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="foo">
            This content will soon be gone!
        </div>
        <script type="text/javascript">
            $('foo').update();
        </script>
    </body>
</html>

If you want to change the contents of an element (rather than clearing it), you can pass the new content of the element as the first argument to update(). As discussed above, there are several different types of content you can pass to update.

Listing 2 shows the simplest case of using update(). In this example a plaintext string is used as the new content of the #foo element.

Listing 2 Updating an element to display a string (listing-2.html)
<html>
    <head>
        <title>Updating an element to display a string</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="foo">
            You won't see this content
        </div>
        <script type="text/javascript">
            $('foo').update('You will see this content');
        </script>
    </body>
</html>

Similar to use using a plaintext string, you can use a string that contains HTML tags. Listing 3 shows an example of doing so.

Listing 3 Updating an element with a HTML string (listing-3.html)
<html>
    <head>
        <title>Updating an element with a HTML string</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="foo">
            You won't see this content
        </div>
        <script type="text/javascript">
            $('foo').update('You will see this <a href="http://www.example.com">hyperlink</a>');
        </script>
    </body>
</html>

In the first article of "Eight Weeks of Prototype" I showed you how to create an element by instantiating the Element class. Any element you create in this manner can also be passed to the update() method. This is an alternative method to calling insert() to actually insert the element into the DOM.

Listing 4 shows an example of creating a hyperlink and adding it to the #foo element.

Listing 4 Passing an element to update() (listing-4.html)
<html>
    <head>
        <title>Passing an element to update()</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="foo">
            You won't see this content
        </div>
        <script type="text/javascript">
            var link = new Element('a', { href : 'http://www.example.com' });
            link.update('This is the link text');
 
            $('foo').update(link);
        </script>
    </body>
</html>

In fact, Prototype implements the update() method such that any class that has a toString() method can be used as an argument to update(). I will show you exactly how to do this in the sixth article of "Eight Weeks of Prototype".

Reading the Content of an Element

In some situations you will want to read the content of an element rather than update it. This is achieved in Prototype by reading the innerHTML property of an element. This property is simply a HTML string representation of the content inside an element.

Listing 5 shows an example of reading the content of an element that exists in the original HTML source of a page, while Listing 6 shows an example of reading an element that has been dynamically created.

Listing 5 Reading the inner HTML content of an element (listing-5.html)
<html>
    <head>
        <title>Reading the inner HTML content of an element</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="foo">
            <a href="http://www.example">Here is a link!</a>
        </div>
        <script type="text/javascript">
            alert($('foo').innerHTML);
        </script>
    </body>
</html>

In This Article