Start Building Professional
Web Apps Today

replace a "loading..." image in a div by a grid or tree

I have a page which contains a tree and a grid, the xmls for both are generated on the server side.
Now this may take a few seconds before the server is ready to provide the xml. What I want to do is show an animated gif in the div holding the tree and the div holding the grid.
Unfortunatly when the xml is loaded the grid and tree don't replace the content in the div but add to it. So I have an animated gif and underneath there is the tree of grid.
Is there a way to have the grid/tree replace all the content in the div instead of adding to it?

kind regards,
Arno.

Both grid and tree already has some content in container DIV while loading data from server, so it not possible to just replace content.
You can use relative positioned elements as workaround

    <div style='position:relative'>
                <div style="display:none;position:absolute; top:50px; left:50px;" id="b_1"><h1 style="color:red">Loading</h1></div>
                <div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver; "></div>
    </div>   

            tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
            tree.attachEvent("onXLS",function(){
                document.getElementById("b_1").style.display="";
                });
            tree.attachEvent("onXLE",function(){
                document.getElementById("b_1").style.display="none";
                });