Q:

Click on element and edit the content (like a textarea)

I want to have an element with some text in (called from a DB), click on that element and be able to edit the text, then when I click off the element, save the updated text in the DB.
I mainly want to know the "best" way of doing this. The two things I have considered are swapping the element and text area when you click on/off the element.
OR 
if the user is logged in, simply loading all the editable elements as , styled to not look like textareas until they're clicked.
There will be anywhere from 5-100 different editable elements on a page, so I really just need the best performance solution for something like this. I can imagine swapping in and out elements with js would be slower than just checking if user is admin then loading 100 text areas.
Which would be the best solution? (other alternatives also accepted)

A:

"Best" never fares well in a question here, as you should have a specific problem, but may I suggest using a ContentEditable area; with this it can double as a display and input element.
Then use events to capture changes and submit.

