How to make an element's content editable with JavaScript (or jQuery)

Question

How would I make it so the content of an element could be made editable through native JavaScript (DOM) and/or jQuery?

Solution 1

Solution to toggle editable on/off using a click handler:

$('button').click(function(){
    var $div=$('div'), isEditable=$div.is('.editable');
    $div.prop('contenteditable',!isEditable).toggleClass('editable')
})

DEMO

Solution 2

JavaScript:

document.getElementById('elementId').contentEditable = 'true';

Solution 3

Look at this example i've made: http://jsfiddle.net/K6W7J/

JS:

$('button').click(function(){
    $('div').attr('contenteditable','true');
})

HTML:

<button>CLICK</button>
<div>YOUR CONTENT</div>

Comments

[szeitlin]

original link is still there, but all the links therein are now defunct. :(

[charlietfl]

@Jamen it's really not hard to convert it. try it and if you have problems create another question