Dynamic nested unordered lists in GWT UIBinder - gwt

Question

I'm trying to implement a simple CSS-based menu in GWT UIBinder, but I'm having some difficulties with one particular part.
The menu has two main-level items: "New session" and "Current sessions." When the user clicks "New session", a new list item should be added to the sublist under "Current sessions."
Here is the plain HTML version of the menu:
<div id="cssmenu">
<ul>
<li>New Session</li>
<li class="has-sub">Current Sessions
<ul>
<li>Session 1</li>
<li>Session 2</li>
</ul>
</li>
</ul>
</div>
The basic format was pretty simple to implement in UIBinder, but the dynamic sublist is giving me difficulties.
Here's the basic UIBinder template that I came up with:
The XML:
<!-- Menu.ui.xml -->
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:HTMLPanel id="cssmenu" ui:field="menuDiv">
<ul>
<li ui:field="newSessionItem">New Session</li>
<li class="has-sub" ui:field="currentSessionItem">
Current Sessions
<ul id="currentSessionSublist" ui:field="currentSessionSublistItem">
<li>Session 1</li>
<li>Session 2</li>
</ul>
</li>
</ul>
</g:HTMLPanel>
</ui:UiBinder>
The Java:
// Menu.java
public class Menu extends UIObject {
interface MenuBinder extends UiBinder<DivElement, Menu> {}
private static MenuBinder uiBinder = GWT.create(MenuBinder.class);
#UiField HTMLPanel menuDiv;
#UiField LIElement newSessionItem;
#UiField LIElement currentSessionItem;
#UiField UListElement currentSessionSublistItem;
public Menu() {
setElement(uiBinder.createAndBindUi(this));
}
#UiHandler("newSessionItem")
void handleClick(ClickEvent e) {
addCurrentSession();
}
private void addCurrentSession() {
// dynamic LI should be added here
}
}
I'm unsure how to add the dynamic list items in addCurrentSession(). I tried adding a custom widget that compiles to a <li> element, but was unable to add it using RootPanel.get("currentSessionSublist").add(item). I read somewhere that while it's possible to nest both HTML and Widgets inside an HTMLPanel, Widgets cannot be nested within HTML. If this is the case, how would I go about adding items to the sublist? I was hoping to go the widget route so I could later add the ability to remove a specific list item programmatically.
I don't want to use GWT's Menu, MenuItem, etc because those compile to tables.

Answer 1

Try this to dynamically add an item to a list (ordered/unordered):
final LIElement listItem = Document.get().createLIElement();
listItem.setInnerText("your text"); // or setInnerHTML("...")
this.currentSessionSublistItem.appendChild(listItem);

Answer 2

The crux is to go through the HTMLPanel:
menuDiv.add(item, currentSessionSublistItem);