Append nodes to tree

Tutorial » Append nodes to tree

This tutorial show you how to append nodes to tree. We will create a Foods tree that contains fruit and vegetable node, and then add some other fruits to the existing fruit node.

Create foods tree

First of all, we create the foods tree, the code looks like this:

Notice that the tree component is defined in <ul> markup and the tree node data is loaded from URL "tree_data.json".

Get parent node

Then we select the fruit node by clicking the node, to which we will append some other fruits data. Invoke the getSelected method to get the handle on node:

The return result of getSelected method is a javascript object that has id,text,attributes and target properties. The target property is a DOM object that refrence to the selected node, with which the append method will use to append children nodes.

Append nodes

When append some fruits, you will see:

As you can see, using tree plugin of easyui to append node is not difficult.

Download the EasyUI example:

easyui-tree-demo.zip