了解Document.createElement（）

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

Answer 2

To qualify this question, I must first admit that I am a pure front-ender – I haven't played with GWT and I write raw Javascript, so this answer is based on esoteric knowledge of in-browser DOM.

1. Yes! Live document DOM manipulation is costly. Manipulating the DOM before insertion is much quicker, since things like style computations, layout reflow calculations, and DOM mutation events are run just once instead of with every individual modification.

2. It exists in the DOM – the DOM simply being the XML manipulation abstraction that was used to create it in the first place – it simply not yet part of the document DOM, and all the additional complications that brings about.

Answer 3

I think you should use a StringBuilder for your implementation. You can do all the manipulations with the StringBuilder (insert tags, change their position, etc.), and when you are done, you add its content to an HTML widget as a string. It would be much faster than creating elements, appending children, etc.