Question

I’m using GWT and its underlaying DOM capabilities.

What I’m basically trying to achieve is :

• Have a div element holding some text
• Some of these text would be surrounded by span elements
• The span elements are draggable into each other and offers contextual menus
• New span elements can be created dynamically by the end-users

This is what it could look like :

At the startup of the application, and during end-users dynamic creation of spans, I have to do some Element and Nodes manipulations (creating, inserting, modifying, deleting). To achieve this, I have to go through the DOM tree to be able to find particular elements.

I’m looking for ways to reduce useless time spent at the startup of the application, where I build my div element (containing all the text and span elements).

Take this example :

DivElement outermostDiv = Document.get().createDivElement();
processText(outermostDiv, text); // text could be a Java String element
turnTheseIntoSpans(listOfSpans, outermostDiv); // listOfSpans could be a list of text that must be surrounded by span elements.

Let’s imagine, that turnTheseIntoSpans do lots of modifications of the outermostDiv element using methods like : appendChild(), removeFromParent(), …

My questions are :

1. Is it a good practise to modify outermostDiv and its childs before inserting it into the DOM ?

2. I can have access to outermostDiv childs, sibling of childs, without having added it to the DOM. I would like to understand how a browsable tree of elements exists even before outermostDiv is added to the DOM ?

Answer 1

Document.createDivElement() creates an object that implements com.google.gwt.dom.client.Node, by calling the following JavaScript:

return doc.createElement('div');

Such a node is not initially attached to the document tree, but even before it is, you can already perform most operations on it (except for the ones that would need its parent node, as this is still null).

Note: The node is created by the same document it will later be attached to (this is necessary, because nodes created by a different document may be incompatible – so you can’t always attach all nodes everywhere).