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