Question: Is it possible to **replace** known html element with my widget component? (Emphasis on the word 'replace', I don't want to put the widget **in** that element. :)

```
<body>
  <img />
  <div />
  <a id="tmpEl" />
  ...
  <img />
</body>

```

would become

```
<body>
  <img />
  <div />
  <div class="gwt-panel">...</div>
  ...
  <img />
</body>

```

I tried something like this...

```
tmpEl.getParentElement().replaceChild(myPanel.getElement(), tmpEl);

```

...but the resulting DOM elements were 'deaf', i.e. they did not receive click events. (To make this work I would probably have to call *RootPanel.get().adopt(widget)*, but that method is not accessible.)

For a second I thought *[HTMLPanel.addAndReplaceElement](http://bit.ly/bnQ5sA)* could be the answer, but that only works when your 'placeholder' element is (direct) child of HTMLPanel widget. Which is obviously not my case. :(

Note please that I only know id of that element, I'm not creating it. Simply put: I need **exactly what the question says**.

As for 'DOM manipulation at higher level': I will happily manipulate the DOM at highest possible level if it lets me place widget instead of that placeholder element.

Answer: 
It seems that calling *widget.onAttach()* after inserting widget into DOM does the trick.

```
class MyWidget extends Composite
{
  ...

  public void attach()
  {
    /* Widget.onAttach() is protected
     */
    onAttach();

    /* mandatory for all widgets without parent widget
     */
    RootPanel.detachOnWindowClose(this);
  }
}

tmpEl.getParentElement().replaceChild(myWidget.getElement(), tmpEl);
myWidget.attach();

```

Credit goes to André at [Google Web Toolkit group](http://groups.google.com/group/google-web-toolkit/msg/f9e04a9611677bff).

I still wonder though why there is no *RootPanel.addAndReplaceElement(Widget, Element)*, similar to *[HTMLPanel.addAndReplaceElement(Widget, Element)](http://bit.ly/bnQ5sA)*.
I agree with [markovuksanovic](https://stackoverflow.com/questions/3075631/how-to-replace-element-with-my-gwt-widget/3075890#3075890) - you should consider DOM manipulation on a "higher level". For example, the functionality you need is provided via the [`InsertPanel`](http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/user/client/ui/InsertPanel.html) interface, which [`FlowPanel`](http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/user/client/ui/FlowPanel.html) implements:

```
FlowPanel mainPanel = new FlowPanel();
Hyperlink link = new Hyperlink("Something cool");
mainPanel.add(link);
mainPanel.add(new Label("Bla bla"));

// Now we want to replace the first element of the FlowPanel with a TextBox
// We can do that by its index...
mainPanel.remove(0);

// ...or Widget instance
mainPanel.remove(link);

// Now we add a TextBox at the beginning
mainPanel.add(new TextBox(), 0);

```

As you can see, this code is much more readable (at least to me), you don't manipulate the DOM directly (referencing via ids and such). Of course, there are places where direct DOM manipulation is beneficial (optimizing, most notably), but for the most part, I'd avoid juggling Elements, ids and such :) (at least in GWT)