gecko-dev/profile/resources/samples/test-tree-widget.xul

<!--

This test exercises creation of DOM elements from the XUL document.

-->

<?xml-stylesheet type="text/css" href="dom-test-4.css"?>

<foo:foo xmlns:foo="http://foo.bar.com/xml#" xmlns:html="http://www.w3.org/TR/REC-html40"
         xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<html:script>
var count = 0;
var selectIndex = 0;

function newElement(index)
{
  var elem = document.createElement('foo:bar');
  var text = document.createTextNode('Node ' + index);
  elem.appendChild(text);
  document.lastChild.appendChild(elem);
}


function addElements()
{
  var i = 0;
  for (i = 0; i &lt; 9; i++) {
     newElement(i)
  }
}


function toggleColor()
{
  element = document.getElementById("SelectedElement");
  var index = element.value;
  
  var barElements = document.getElementsByTagName("bar");
  var child1 = barElements[index];
  
  dump("child: "+child1.value);

  if (child1.getAttribute("enabled")) {
    child1.removeAttribute("enabled");
  }
  else {
    child1.setAttribute("enabled", "true");
  }

  if (selectIndex != index) {
    var lastSelectedChild = barElements[selectIndex];
    lastSelectedChild.removeAttribute("enabled");
  }

  selectIndex = index;
}

</html:script>

This is the place to test tree widgets...
<html:script>
  addElements();
</html:script>

<html:input type="text" id="SelectedElement" size="15"/>
<html:input name="b2" type="button" value="Select Element" onclick="toggleColor();"/>


</foo:foo>