Estoy extrayendo un contenido de la matriz de PHP y tengo una situación como esta:

 <div class="weight-display">
 <span>04/25/2011</span> <span>100lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
 </div>
 <div class="weight-display">
 <span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
 </div>
 etc...

Ahora cuando alguien hace clic en Editar dentro, digamos, primero div donde el peso es 100 lb, solo necesito ese "div" para cambiar y tener un campo de entrada en lugar de texto simple donde está el peso (mientras que otros permanecerán igual) y ser así:

<div class="weight-display">
<span>04/25/2011</span> <input type="text" value="100" /> <span>Save</span> <span>Cancel</span>
</div>
<div class="weight-display">
<span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
etc..

Entonces, básicamente, div tiene que "recargarse" y cambiar el contenido. Ahora realmente necesito una solución Javascript muy simple. Preferiblemente, me gustaría una solución con un div oculto debajo del original, para que simplemente intercambien lugares cuando el usuario haga clic en EDITAR y, en un caso, si se presiona CANCELAR para intercambiar lugares nuevamente, de modo que se muestre el div original con texto ...

Gracias, Peter