title: Using jQuery for Dom Outlining.
body: <p>I am a newbie in jQuery and javascript, so this might seem as a trivial question. I want to use the DOM Outliner code found <a href="https://github.com/andrewchilds/jQuery.DomOutline" rel="nofollow">here</a> in an html page that I have created.</p>
  
  <p>My html page source is as follows</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;h3&gt;Dom Outlining&lt;/h3&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;      
      &lt;script src="jquery.dom-outline-1.0.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function() {
          var myExampleClickHandler = function (element) { console.log('Clicked element:', element); }
          var myDomOutline = DomOutline({ onClick: myExampleClickHandler });
  
          // Start outline:
          myDomOutline.start();
  
          // Stop outline (also stopped on escape/backspace/delete keys):
          myDomOutline.stop();
      });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;My First Heading&lt;/h1&gt;
  
      &lt;p&gt;My first paragraph.&lt;/p&gt;
      &lt;div class="first class"&gt;
          &lt;p&gt; This is a division.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However, this doesn't seem to select and highlight the element as required. Can someone tell me what's missing in my code?</p>