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)*.
The solution is probably not so much different from what Igor suggested. I'd write something like this:

```
RootPanel rootPanel = RootPanel.get();
Element anchorElement = DOM.getElementById("tmpEl");
Anchor anchor = Anchor.wrap(anchorElement);

rootPanel.remove(anchor);
rootPanel.insert(new HTML("<div class='gwt-panel'>...</div>", 0); 

```