Allowing user to change the text of a div

Question

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.

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.

http://jsfiddle.net/qbXcw/11/

HTML

<div id="main">
    <div id="allowedit">CLICK BUTTON TO EDIT THIS TEXT
        <input type="button" value="CLK ME" onclick="changetext(this)" />
    </div>
  <div>

JAVASCRIPT

changetext = function (e) {  
     src=(e.parentNode);
     src.outerHTML="<div><input +"+"name=input"+"></div>";     
}

Answer 1

You can use html attribute contenteditable

<div contenteditable="true">
  This text can be edited by the user.
</div>