Before posting this I've checked other questions on the stackoverflow. one is this:

creating a new node in jstree

But somehow I'm not able to get it working.

I'm fetching the child node details through ajax. When you click on a node it will trigger ajax request and get the child node details. I want to attach these details to the parent(clicked) node in the jstree.

Here is the jsfiddle demo(without ajax): https://jsfiddle.net/8wyqd9om/

Can you please help me with this?

HTML:

<div id='cat_tree'>

<ul>

<li id=1>First

    <ul>



      <li id=2>First</li>

      <li id=3>First</li>

    </ul>

</li>

<li id=4>First</li>

<li id=5>First</li>    

<li id=6>First</li>

</ul>

</div>

js:

$(function () { 

    $('#cat_tree').jstree({core: {

        themes:{

        icons:false

        }

    }}); 



    var data = [

        { id : 7, parent : #4, text : second },

        { id : 8, parent : #4, text : second },

    ];



    $('#click').click(function() {

        $('#cat_tree').jstree().create_node($('#4'), data, 'last', function(){

        alert(done);

        }, true);

    });

});