How To Make An Element's Content Editable With Javascript (or Jquery)

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

Solution 1:

JavaScript:

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

Solution 2:

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 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>

Solution 4:

If you use jQuery to add the attribute to the element you should be able to switch between edit mode and 'normal' HTML mode. The contenteditable attribute is supported by all major browsers. Check out http://blog.whatwg.org/the-road-to-html-5-contenteditable for more information.

Solution 5:

Or you can use this plugin which i have been with no problem any time. it is realy simple and easy to use.

Here an example:

Html:

<divstyle="margin: 150px"><ahref="#"id="username">awesome</a></div>

JS

 $('#username').editable({
        type: 'text',
        url: '/post',    
        pk: 1,    
        title: 'Enter username',
        ajaxOptions: {
            type: 'put'
        }        
    });

DEMO