Understanding Document.createelement()

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

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

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

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