title: Allowing user to change the text of a div
body: <p>This was just a query in another of my questions. However i got no solution so i am reposting this question and hopefully someone can solve my dilemma.</p>
  
  <p>I have a div.I want the div contents to be editabe.
  what i basically want is onlick of a button the div should turn into a text box and allow the user to change the contents of the div. I would prefer to avoid Jquery.</p>
  
  <p><a href="http://jsfiddle.net/qbXcw/11/" rel="noreferrer">http://jsfiddle.net/qbXcw/11/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div id="allowedit"&gt;CLICK BUTTON TO EDIT THIS TEXT
          &lt;input type="button" value="CLK ME" onclick="changetext(this)" /&gt;
      &lt;/div&gt;
    &lt;div&gt;
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>changetext = function (e) {  
       src=(e.parentNode);
       src.outerHTML="&lt;div&gt;&lt;input +"+"name=input"+"&gt;&lt;/div&gt;";     
  }
  </code></pre>