JavaScript Tree

Invoke the addTo method of the jqxTree. Author: http://jqwidgets.com

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxTree'>
    <ul>
        <li item-selected='true'>Home</li>
        <li item-expanded='true'>Solutions
            <ul>
                <li>Education</li>
                <li>Financial services</li>
                <li>Government</li>
                <li>Manufacturing</li>
                <li>Solutions
                    <ul>
                        <li>Consumer photo and video</li>
                        <li>Mobile</li>
                        <li>Rich Internet applications</li>
                        <li>Technical communication</li>
                        <li>Training and eLearning</li>
                        <li>Web conferencing</li>
                    </ul>
                </li>
                <li>All industries and solutions</li>
            </ul>
        </li>
    </ul>
</div>
<input type="button" style="margin: 10px;" id="jqxbutton" value="Add new sub item" />

JavaScript

$('#jqxTree').jqxTree({
     height: '300px',
     width: '300px',
     theme: 'energyblue'
   });
   $("#jqxbutton").jqxButton({
     theme: 'energyblue',
     width: 200,
     height: 30
   });
   $('#jqxbutton').click(function() {

     var treeItems = $("#jqxTree").jqxTree('getItems');
     var firstItem = treeItems[0];

     const newLiTag = document.createElement('li');
     newLiTag.innerHTML = 'My new Item';

     var firstItemElement = firstItem.element;
     $('#jqxTree').jqxTree(
       'addTo', {
         html: `<span style = 'font-weight: bold;'
         id = 'myItem'>Item</span>`
       },
       firstItemElement
     );

     console.log(newLiTag);


   });