[Javascript] Dynamically Adding & Removing Items Between a DIV

[Paul Novitski]

At 06:00 PM 1/12/2006, List_Mail_Att wrote:
><Div id="xxx"]
>
>     I want to be able to TOTALLY REMOVE ALL ITEMS
>           (not just Hide\Show)
>     and
>     I want to be able to add ITEMS (i.e. Tables, etc.)
>
><\Div]


Gene, bookmark this:

Gecko DOM Reference
http://developer.mozilla.org/en/docs/Gecko_DOM_Reference

Here are just a few of the methods that can help you:

appendChild
http://developer.mozilla.org/en/docs/DOM:element.appendChild

innerHTML
http://developer.mozilla.org/en/docs/DOM:element.innerHTML

insertBefore
http://developer.mozilla.org/en/docs/DOM:element.insertBefore

removeChild
http://developer.mozilla.org/en/docs/DOM:element.removeChild

In this situation:

         <div id="xxx">This is <em>emphasized</em> text.</div>

the DIV is the parent of three child nodes:

         div#xxx
         |
         |- This is
         |- <em>emphasized</em>
         |- text.

In addition to deleting or replacing the entire contents of the div 
using innerHTML, you can examine, delete, or replace the contents of 
the div by walking through the collection of its childNodes:

         var oDiv = document.getElementById("xxx");

         while (oDiv.firstChild)
         {
            oDiv.removeChild(oDiv.firstChild);
         }

Similarly, you can build a table with appendChild.

The web is full of examples of these methods' usage (try Googling 
"javascript appendChild"), and we on this list can help you with 
specific questions.

Have fun,
Paul