jstree.html

<div>
    <h1>Represent HTML and JSON Data in Tree Structure Using jsTree</h1>
    <!-- Container to show tree views -->
    <div id="tree-view-container">
        <!-- Container to show tree view from HTML -->
        <div class="tree-view-container-item">
            <h2>Tree View from HTML Content</h2>
            <!-- Tree View Element -->
            <div id="tree-view-from-html">
                <ul>
                    <li>
                        Node 1
                        <ul>
                            <li>Node 1.1</li>
                            <li>Node 1.2</li>
                            <li>Node 1.3</li>
                            <li>Node 1.4</li>
                            <li>Node 1.5</li>
                        </ul>
                    </li>
                    <li>
                        Node 2
                        <ul>
                            <li>Node 2.1</li>
                            <li>Node 2.2</li>
                            <li>Node 2.3</li>
                            <li>Node 2.4</li>
                            <li>Node 2.5</li>
                        </ul>
                    </li>
                    <li>
                        Node 3
                        <ul>
                            <li>Node 3.1</li>
                            <li>Node 3.2</li>
                            <li>Node 3.3</li>
                            <li>Node 3.4</li>
                            <li>Node 3.5</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!-- Container to show tree view from JSON -->
        <div class="tree-view-container-item">
            <h2>Tree View from JSON Content</h2>
            <!-- Tree View Element -->
            <div id="tree-view-from-json"></div>
        </div>
    </div>
</div>