# Manipulating Nodes

Learn how to add and remove nodes of Wijmo's TreeView in this tutorial

## Content


### Adding Nodes

To add nodes to a tree, call the parent node's __addChildNode__ method. To add nodes at the root level, call the TreeView's __addChildNode__ method.

This is more efficient than adding data items to the tree's __itemsSource__ array and refreshing the tree by calling the __loadTree__ method.

Example: Adds a child node either to an existing node if it is selected or to the root level of tree in case no node is currently selected.
##### Javascript

```javascript
import * as wjNav from '@mescius/wijmo.nav';

// create the tree
var theTree = new wjNav.TreeView('#theTree', {
	itemsSource: getData(),
	displayMemberPath: 'header',
	childItemsPath: 'items'
});

  // handle button click to add a child node
document.getElementById('btnAdd').addEventListener('click', function () {
  	var newItem = { header: document.getElementById('theInput').value },
    		node = theTree.selectedNode;
		if (node) {
    		theTree.selectedNode = node.addChildNode(0, newItem);
		} else {
				theTree.selectedNode = theTree.addChildNode(0, newItem);
		}
	});
}
```
### Removing Nodes

To remove nodes from a TreeView control, remove the data item from the tree's __itemsSource__ array, then refresh the tree by calling the __loadTree__ method:

Example: Removes the currently selected node.
##### Javascript
```javascript
document.getElementById('btnRemove').addEventListener('click', function(){
    if (theTree.selectedItem) {

      // find the array that contains the item to be removed
      var parent = theTree.selectedNode.parentNode;
      var arr = parent ? parent.dataItem[theTree.childItemsPath]: theTree.itemsSource;
		
      // remove the item from the parent collection
      var index = arr.indexOf(theTree.selectedItem);
      arr.splice(index, 1);

      // refresh the tree
      theTree.loadTree();
  	}
});
```
### Refreshing Nodes

To refresh a node after its data has changed, call the node's refresh method.

This is more efficient than updating the data and refreshing the tree by calling the loadTree method.

Example: Depicts two approaches, calling the refresh method by passing the new data and updating the node with new data and then invoking the refresh method.

##### Javascript
```javascript
// refresh the node with new data
document.getElementById('btnItemData').addEventListener('click', function () {
  	theTree.selectedNode.refresh({
    	header: 'given itemData ' + Date.now(), items: [
      	{ header: 'first child' },
        { header: 'second child' },
			]
		});
	});

  // update the data, refresh the node
  document.getElementById('btnItemsSource').addEventListener('click', function () {
  	var node = theTree.selectedNode,
    		arr = node.itemsSource;
		arr[node.index] = {
			header: 'updated itemData ' + Date.now(), items: [
				{ header: 'first child' },
				{ header: 'second child' },
			]
		};
		node.refresh();
	});
```