content-editable

HTML

<div id="content1" class="editable">Surprisingly, this text is editable.</div>

<div id="content2" class="editable">And this one, too.</div>

JavaScript

// var div = document.getElementsByClassName('editable')
var list = document.getElementsByClassName("editable");
for (var i = 0; i < list.length; i++) {
    div = list[i];
    div.onclick = function (e) {
        this.contentEditable = true;
        this.focus();
        this.style.backgroundColor = '#E0E0E0';
        this.style.border = '1px dotted black';
    }

    div.onmouseout = function () {
        this.style.backgroundColor = '#ffffff';
        this.style.border = '';
        this.contentEditable = false;
    }
}

/* same in jQuery:
  $(".editable").each(function(index, element) {
    // element is a node with the desired class name
  });
  // via http://stackoverflow.com/questions/7480496/javascript-getelementbyclass
*/