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 1, Beginning with Prototype

Creating New Elements and Inserting Them into the DOM

New in Prototype 1.6.0 is the ability to easily create new DOM elements that will work across all browsers. An element is created by instantiating the Element class. The first argument to this class is the type of element to be created, while the second argument is used to specify the element's attributes.

Listing 10 shows how you would dynamically create a new hyperlink (that is, the equivalent of the using the HTML <a>). In this example, we call update() on the created element to set the link text.

After an element has been created, it must be inserted into the document. This is achieved by calling the insert() method on another element that already exists in the document.

Listing 10 Creating a new element in the DOM (listing-10.html)
<html>
    <head>
        <title>Creating a new element in the DOM</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="main">
            <div>Some item</div>
        </div>
 
        <script type="text/javascript">
            var attrs = {
                href   : 'http://www.example.com',
                target : '_blank'
            };
 
            var link = new Element('a', attrs);
 
            link.update('Visit this web site');
 
            $('main').insert(link);
        </script>
    </body>
</html>

Note: When you create the attributes for a new element, some attribute names need to be quoted. For example, using { class : 'MyClass' } will cause an error in some browsers. Instead, you should use { 'class' : 'MyClass'}.

If you were to manually create the HTML as generated by this JavaScript, it would like that in Listing 11.

Listing 11 The HTML equivalent of the code in Listing 10 (listing-11.html)
<html>
    <body>
        <div id="main">
            <div>Some item</div>
            <a href="http://www.example.com" target="_blank">Visit this web site</a>a>
        </div>
    </body>
</html>

When you call the insert() method with just the new element as an argument, that new element then becomes the last child of the target element. Alternatively, you can place the new element before the target, after the target, or as the first child of the target. This is done by slightly changing the argument to insert().

When we used $('main').insert(link), this was the equivalent of calling $('main').insert({ bottom : link }), meaning it was inserted as the last child (as you can see in Listing 11, since it appears after the "Some Item" div). To make it appear before the "Some item" div, you would use $('main').insert({ top : link }). This would result in HTML as in Listing 12.

Listing 12 The HTML equivalent of inserting the new link as the first child (listing-12.html)
<html>
    <body>
        <div id="main">
            <a href="http://www.example.com" target="_blank">Visit this web site</a>a>
            <div>Some item</div>
        </div>
    </body>
</html>

To insert the link before the #main div, you can instead use $('main').insert({ before : link }). The HTML equivalent of this is shown in Listing 13.

Listing 13 The HTML equivalent of inserting the new link before the target element (listing-13.html)
<html>
    <body>
        <a href="http://www.example.com" target="_blank">Visit this web site</a>a>
        <div id="main">
            <div>Some item</div>
        </div>
    </body>
</html>

Finally, you can insert the new element after the #main div by using $('main').insert({ after : link }). The HTML equivalent of this is shown in Listing 14.

Listing 14 The HTML equivalent of inserting the new link after the target element (listing-14.html)
<html>
    <body>
        <div id="main">
            <div>Some item</div>
        </div>
        <a href="http://www.example.com" target="_blank">Visit this web site</a>a>
    </body>
</html>

When using the insert() method, it is possible to use HTML code to create the new element (as opposed to a DOM element created as shown as the start of this section). Listing 15 shows an alternative to Listing 10 for creating a hyperlink and inserting it into the DOM.

Listing 15 Creating a new element using HTML code (listing-15.html)
<html>
    <head>
        <title>Creating a new element in the DOM</title>
        <script type="text/javascript" src="/js/prototype.js"></script>
    </head>
    <body>
        <div id="main">
            <div>Some item</div>
        </div>
 
        <script type="text/javascript">
            $('main').insert('<a href="http://www.example.com" target="_blank">Visit this web site</a>');
        </script>
    </body>
</html>

Using the methods shown in this section, it is very easy to create new elements as required and insert them wherever you need them to be in your document.

In This Article