Question

从我的小部件编译GWT客户端后，我得到以下结构。

<td align="left" width="100%" class="gwt-TabBarRest-wrapper" style="vertical-align: bottom;"><div class="gwt-TabBarRest" style="white-space: normal; height: 100%;">&nbsp;</div></td>

如何使用button元素而不是 来构建此结构：

<td align="left" width="100%" class="gwt-TabBarRest-wrapper" style="vertical-align: bottom;"><div class="gwt-TabBarRest" style="white-space: normal; height: 100%;"><button type="button" class="gwt-Button helpButton"></div></td>

Answer 1

首先为Id设置div。

你的html现在看起来像这样

<td align="left" width="100%" class="gwt-TabBarRest-wrapper" style="vertical-align: bottom;"><div id="some_id" class="gwt-TabBarRest" style="white-space: normal; height: 100%;">&nbsp;</div></td>

现在使用以下代码段。

Button button = new Button();
....
....

RootPanel.get("some_id").add(button);

Answer 2

这样的事情应该有效：

    ButtonElement buttonEl = DOM.createButton().cast();
    buttonEl.setInnerHTML("MyButton01");
    Element el = DOM.getElementById("myButtonPlace");
    el.appendChild(buttonEl);
    DOM.sinkEvents(el, Event.ONCLICK | Event.ONMOUSEOVER);
    DOM.sinkEvents(buttonEl, Event.ONCLICK | Event.ONMOUSEOVER);
    DOM.setEventListener(buttonEl,
                         new EventListener() {
                            @Override
                            public void onBrowserEvent(Event event) {
                                GWT.debugger();
                                switch (DOM.eventGetType(event)) {
                                    case Event.ONCLICK: GWT.log("you clicked the button");
                                    break;
                                    case Event.ONMOUSEOVER: GWT.log("the mouse is over the button");
                                    break;
                                }
                            }
                        });

Answer 3

您可以使用.html方法在JQuery中执行此操作，该方法允许您设置HTML元素的内容。

$("div.gwt-TabBarRest").html('<button type="button" class="gwt-Button helpButton"></button>');

如何在javascript中将元素插入到HTML结构中

3 个答案: