Manipulating content within a tree control

Tree controls and the nodes within them are implemented as HTML tags. They are parsed by Adobe Dreamweaver and stored in the document tree. These tags can be manipulated in the same way as any other document node. For more information on DOM functions and methods, see The Adobe Dreamweaver Document Object Model.

Adding nodes To add a node to an existing tree control programmatically, set the innerHTML property of the MM:TREECONTROL tag or one of the existing MM:TREENODE tags. Setting the inner HTML property of a tree node creates a nested node.

The following example adds a node to the top level of a tree:

var tree = document.myTreeControl;//add a top-level node to the bottom of the treetree.innerHTML = tree.innerHTML + '<mm:treenode name="node3"¬ value="node3">'; 

Adding a child node To add a child node to the currently selected node set the innerHTML property of the selected node.

The following example adds a child node to the currently selected node:

var tree = document.myTreeControl;var selNode = tree.selectedNodes[0];//deselect the node, so we can select the new oneselnode.removeAttribute("selected");//add the new node to the top of the selected node's childrenselNode.innerHTML = '<mm:treenode name="item10" value="New item11" ¬ expanded selected>' + selNode.innerHTML;

Deleting nodes To delete the currently selected node from the document structure, use the innerHTML or outerHTML properties.

The following example deletes the entire selected node and any children:

var tree = document.myTreeControl;var selNode = tree.selectedNodes[0];selNode.outerHTML = "";