title: Printing the DOM tree of a HTML code in a new window
body: <p>I'm trying to print out the DOM tree of the HTML code written in the textarea by the user but I can't print out the code typed in textarea.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;title&gt; HTML Tree Structure &lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;SCRIPT LANGUAGE="JavaScript"&gt;
        function traverseDOMTree(targetDocument, currentElement, depth) {
          if (currentElement) {
            var j;
            var tagName = currentElement.tagName;
            // Prints the node tagName, such as &lt;A&gt;, &lt;IMG&gt;, etc
            if (tagName)
              targetDocument.writeln("&amp;lt;"+currentElement.tagName+"&amp;gt;");
            else
              targetDocument.writeln("[unknown tag]");
  
            // Traverse the tree
            var i = 0;
            var currentElementChild = currentElement.childNodes[i];
            while (currentElementChild) {
              // Formatting code (indent the tree so it looks nice on the screen)
              targetDocument.write("&lt;BR&gt;\n");
              for (j = 0; j &lt; depth; j++) {
                // &amp;#166 is just a vertical line
                targetDocument.write("&amp;nbsp;&amp;nbsp;&amp;#166");
              }               
              targetDocument.writeln("&lt;BR&gt;");
              for (j = 0; j &lt; depth; j++) {
                targetDocument.write("&amp;nbsp;&amp;nbsp;&amp;#166");
              }         
              if (tagName)
                targetDocument.write("--");
  
              // Recursively traverse the tree structure of the child node
              traverseDOMTree(targetDocument, currentElementChild, depth+1);
              i++;
              currentElementChild=currentElement.childNodes[i];
            }
            // The remaining code is mostly for formatting the tree
            targetDocument.writeln("&lt;BR&gt;");
            for (j = 0; j &lt; depth - 1; j++) {
              targetDocument.write("&amp;nbsp;&amp;nbsp;&amp;#166");
            }     
            targetDocument.writeln("&amp;nbsp;&amp;nbsp;");
            if (tagName)
              targetDocument.writeln("&amp;lt;/"+tagName+"&amp;gt;");
          }
        }
  
        function printDOMTree(domElement, destinationWindow) {
          var outputWindow = destinationWindow;
          if (!outputWindow)
            outputWindow = window.open();
  
          outputWindow.document.open("text/html", "replace");
          outputWindow.document.write("&lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt;DOM&lt;/TITLE&gt;&lt;/HEAD&gt;&lt;BODY&gt;\n");
          outputWindow.document.write("&lt;CODE&gt;\n");
          traverseDOMTree(outputWindow.document, domElement, 1);
          outputWindow.document.write("&lt;/CODE&gt;\n");
          outputWindow.document.write("&lt;/BODY&gt;&lt;/HTML&gt;\n");
  
          outputWindow.document.close();
        }  
      &lt;/SCRIPT&gt;
      &lt;DIV ID="myDiv"&gt;
        &lt;form&gt;
          &lt;textarea name="htmlcode" id="htmlCode"
              style="width: 400px; height: 100px"&gt;
          &lt;/textarea&gt;
          &lt;br/&gt;
          &lt;input type="button" value="Show me the DOM Tree"
              onClick="javascript=printDOMTree(document.getElementById('htmlCode')); return true;" /&gt;
          &lt;br/&gt; 
        &lt;/form&gt;
      &lt;/DIV&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I can't get the input button and <code>printDOMTree</code> function to work with reading what's typed by the user into the <code>textarea</code>. What's wrong with the HTML part of my code? How can I improve it and make it work?</p>