Consulta con edición "en vivo"

[Dradi7]

Bueno amigo te dejo un ejemplo básico tu lo puedes ya mejorar de como hacer lo que quieres

Código HTML:

<div id="main">
    <div id="title">
        NOTICIA 1
    </div>
    <br />
    <div id="content">
        CONTENIDO
    </div>
<div>
<a id="edit" href="#">Editar</a>
<script>
 

Código Javascript:

// FUNCION QUE SE ENCARGA DE SACAR LOS ESPACIOS EN BLANCO DE UNA CADENA
    String.prototype.Trim = function() {
        return this.replace(/^\s+|\s+$/g,"");
    }
    // FUNCION QUE ME PERMITE MANEJAR LOS EVENTOS DE LOS NAVEGADORES
    function createEvent(elem,even,func){
        if (elem.addEventListener){
            elem.addEventListener(even, func, false);
        }
        else{
            elem.attachEvent('on' + even, func);
        }
    }
    // FUNCION CUANDO INICIALIZA MI PAGINA
    function init(){
        var edit = document.getElementById("edit");
        createEvent(edit,"click",function(){
            editar();
            return false;
        });
    }
    // ESTA ES LA FUNCION EDITAR EN VIVO
    function editar(){
        var main = document.getElementById("main");
        var title = document.getElementById("title");
        var content = document.getElementById("content");
        var editTitle = document.createElement("input");
        var editContent = document.createElement("textarea");
        var edit = document.getElementById("edit");
        var save = document.createElement("input");
        var space1 = document.createElement("br");
        var space2 = document.createElement("br");
        
        editTitle.id = "editTitle";
        editContent.id = "editContent";
        save.id = "save";
        space1.id = "space1";
        space2.id = "space2";
        
        editTitle.type = "text";
        save.type = "button";
        
        editTitle.value = title.innerHTML.Trim();
        editContent.innerHTML = content.innerHTML.Trim();
        save.value = "Editar";
        
        title.style.display="none";
        content.style.display="none";
        edit.style.display="none";
        
        main.insertBefore(editTitle);
        main.insertBefore(space1);
        main.insertBefore(editContent);
        main.insertBefore(space2);
        main.insertBefore(save);
        
        createEvent(save,"click",function(){
            var _main = document.getElementById("main");
            var _title = document.getElementById("title");
            var _content = document.getElementById("content");
            var _edit = document.getElementById("edit");
            var _editTitle = document.getElementById("editTitle");
            var _editContent = document.getElementById("editContent");
            var _save = document.getElementById("save");
            var _space1 = document.getElementById("space1");
            var _space2 = document.getElementById("space2");
            
            _title.innerHTML = _editTitle.value;            
            _content.innerHTML = _editContent.value;
            
            _main.removeChild(_editTitle);
            _main.removeChild(_editContent);
            _main.removeChild(_save);
            _main.removeChild(_space1);
            _main.removeChild(_space2);
            
            _title.style.display="block";
            _content.style.display="block";
            _edit.style.display="block";
            
            return false;
        });
    }
 
    window.onload = init;