jsTree

The output basically follows the structure of the HTML data source:

<your-container-node class="tree">
  <ul class="jstree-default jstree-your-theme-name">
    <li class="open|closed|leaf [your-class-names]" [your-attributes="attribute_values"]>
      <a 
        class="language-of-node [your-class-names]"
        style="[background-image:url(your-icon-name);] [your-styles]" 
        [your-attributes="attribute_values"]>Your node name</a>
        <ul>
        <!-- CHILD NODES -->
        </ul>
    </li>
  </ul>
</your-container-node>

Your container node get the class tree applied to it. The first <ul> has the class jstree-default and then if different - the name of the theme applied. This ensures that the applied theme's rules override the matching default theme rules.

NOTE that it is not good practice to set the actual <ul> node as the source of the tree (when using predefined HTML).

Each <li> node has one of the classes open, closed or leaf. You can check for those classes in the callback functions, so that you know what node you are dealing with. A leaf node has no children, a closed node has chidren but they are not visible (if there is no <ul> node within this one - the children are not loaded yet), an open node has children, and they are visible.

The count of <a> nodes in each <li> depends on the count of languages for the tree (there is one <a> node for each language, and the node has the language name as a class) (NOTE that only one language is visible at a time). If you do not set the href attribute, a # is set.