Creating New Elements and Moving Existing Elements

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:

• Insert in as the first or last child of a known node. The BODY node (corresponding to the HtmlBody class) is a convenient node for this, because many times it is convenient to add a new element at the top or bottom of the page.
• Insert it right before or right after some other known node. For instance, you could create a new image element, and insert it right after a para node.

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
     }

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.)