AJAX Tutorial for Java Programmers

Creating New Elements and Moving Existing Elements

Sometimes just hiding and showing page elements is appropriate. At other times, it is more appropriate to create new elements and insert them in the page. Sometimes, elements just need to be moved around!

In AJAX programming, great effects can be achieved using all these techniques.

The hierarchy of elements on the HTML page is known as the "Document Object Model" or "DOM" for short.

The DOM is a nicely organized tree structure. Elements are arranged as child and parent nodes.

If you want to create a new HTML node (say, a new <IMG> element), you need to decide where to insert it in the tree structure. There are some convenient options:

Same consideration apply if you want to move an element -- you need to decide where to move it to!

In Jaxcent, new elements are created using the same constructors we have been using, e.g. HtmlPara, HtmlDiv and so on. But the constructors take a SearchType parameter -- to create new elements, this parameter is specified as SearchType.createNew to tell Jaxcent that instead of searching for an existing element, it should create a new element on the page.

The new element must then be inserted in the page. Element insertion is same for new or existing elements, with the difference that when you create a new element, it will not be visible on the page until the first time you have inserted it somewhere in the DOM hierarchy.

These concepts should become clear with an example:

    HtmlBody body = new HtmlBody();               // The BODY of the page
    HtmlPara p = new HtmlPara( this, "myPara" );  // A P tag with id "myPara"


    // Insert the new para at the end, move the old para
    // the new para (from wherever it was)

    void newPara() throws Jaxception
    {
        // Make a new para some text.
        HtmlPara newp = new HtmlPara( this, SearchType.createNew,
                        "P", "My New Para, created at " + new java.util.Date());

        newPara.insertAtEnd( body );  // New para goes at end of BODY

        p.insertBefore( newPara );    // "myPara" goes jsut before new para
     }
The methods insertAtEnd and insertAtBeginning insert (or move) a child node in another node, such as the body. The methods insertBefore and insertAfter insert (or move) a node immediately before or after a sibling node.

Exercise:  Write an HTML file DOM.html that has a para containing some text, and after that a form with id "form". In the form, add a checkbox with name "insertAtEnd" followed by a label "Insert at End". After this, put a button with id "insertTime" and text "Insert Time".

When the button is clicked, if the checkbox has not been checked, insert a new para at the beginning of the BODY giving the current time. If the checkbox has been checked, insert a new para giving the current time at the end of the body. Sleep 2 seconds, then move the new para just before the form. (Note: in the data map, the value for the checkbox will be an empty string if the checkbox has not been checked.)


Next Step: Saving Your Own Data in the Session
Contents