Dynamically replacing DIV's inner text in GWT - gwt

Question

I'm looking for the possibilities that GWT, SmartGWT, offers in terms of dynamically changing the inner HTML text of an element.
Let go though an example :
I have some lorem ipsum text in a DIV element as it follows :
<div id="text">
Lorem <span style="background-color:red">ipsum </span>
dolor sit amet, consectetur adipiscing elit.
Duis convallis iaculis
<span style="background-color:red">ipsum </span>
magna sagittis vel. Lorem
<span style="background-color:red">ipsum </span> dolor sit amet.
</div>
Desired functionality :
I want the user to be allowed to decide at runtime what text is "marked" (red colored). This impact in two things :
Being able to remove an span element, thus replacing
<span style="background-color:red">ipsum </span>
by
ipsum
Being able to add an span element (by doing the opposite)
Once the user has selected the text he wants to "mark", I use something like
RootPanel.get("text").getElement().
setInnerHTML("html content with some new spans tags");
to update the HTML code with the new selection (to achieve that I have some GWT classed that keeps track of the marked text).
This seems to be a little brutal for me because I'm in a situation that I often update the inner HTML code.
Is there any way using GWT (working closely with the DOM) or SmartGWT, to achieve that in a less violent way ?

Answer 1

To access the DOM of your page you can call Document.get(), which has a convenience method for finding an element by it's id Document.get().getElementById("test");
Of course, you should keep a reference to this element so as not to have to search through the DOM everytime you want to access it, because this is brutal.
private Element testDiv = Document.get().getElementById("test");
...
testDiv.setInnerHTML("Some html");
...
testDiv.setInnerHTML("Some other html");
But once you have a reference to this element, calling setInnerHTML is the most efficient way to do what you want. I'm not sure why you think this is brutal. This is probably even more efficient than when you call a method on a widget to change it's content, like setText(" ...") on a TextBox for example, because these methods usually check the value passed as parameter for security.
Security could also be a concern for you, depending on what the user can do. But usually if a user can modify the HTML in your page that's a concern. You might want to look at GWT's SafeHTML feature.
If you're looking for RichText components, you can look at GWT's RichTextArea for example. But this type of component is usually not well supported by all browsers and will take more resources than what you're doing already so I don't recommend it.