How to structure HTML data to be displayed as a tree with jsTree

I'm new with jsTree and I would like to create a tree starting from a <ul> and <li> list inside my HTML page. This using html_data plugin (I hope it's the right way).

I'm wondering: which is the correct way to write in HTML the data that will be turned into a tree by jsTree?

jsTree documentation suggests this one:

<li>
    <a href="some_value_here">Node title</a>
    <!-- UL node only needed for children - omit if there are no children -->
    <ul>
        <!-- Children LI nodes here -->
    </ul>
</li>开发者_开发百科

But it doesn't specify where to put the id attribute that jsTree uses to refer to the data.

Moreover it doesn't seem to work so well. I've seen someone who embeds that code with a <div> and a <ul> tags. For instance:

<div id="categories">
    <ul>
        <li><a href="#">Category 1</a>
            <ul>
                <li><a href="#">SubCategory 1</a></li>
                <li><a href="#">SubCategory 2</a></li>
            </ul>
        </li>
        <li><a href="#">Category 2</a></li>
    </ul>
</div>

Note that the id in the div tag. Is this a correct way? For me it seems not so comfortable using <a href="#"> tags only to write the text of a node... And if I use a <span> I loose the item icon...

Hope someone has a clearer head than mine.

---

This seems to be the pattern used by jsTree to draw the tree:

<div id="mytree">
    <ul>
        <li>
            <a href="#">Node 1</a>
            <ul>
                <li>
                    <a href="#">Node 1.1</a>
                </li>
                <li>
                    <a href="#">Node 1.2</a>
                    <ul>
                        <li>
                            <a href="#">Node 1.2.1</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Node 2</a>
        </li>
    </ul>
</div>

That is each node has the structure recommended by jsTree documentation:

<li>
    <a href="some_value_here">Node title</a>
    <!-- UL node only needed for children - omit if there are no children -->
    <ul>
        <!-- Children LI nodes here (recursively apply the same pattern)-->
    </ul>
</li>

And all the structure must be wrapped with (what documentation doesn't say):

<div id="mytree">
    <ul>
        <!-- all the tree here -->
    </ul>
</div>