一个可以编辑的div

第一种方法：
<div  onclick="aaa(this)">999</div>
function aaa(box) {
    box.outerHTML="<input onblur='bbb(this)' autofocus='autofocus' type='text' value='"+box.innerHTML+"' />"
}
function bbb(box) {
  box.outerHTML='<div  onclick="aaa(this)">'+box.value+'</div>'
}




第二种方法：
<div  onclick="aaa(this)">999</div>
function aaa(box) {
    var inp = document.createElement("input");
    inp.value = box.innerHTML;
    inp.onblur = function () {
        bbb(inp)
    };
    inp.focus()
    document.getElementsByTagName("body")[0].replaceChild(inp, box)


}
function bbb(box) {
    var div = document.createElement("div");
    div.innerHTML = box.value;
    div.onclick = function () {
        aaa(div)
    };
    document.getElementsByTagName("body")[0].replaceChild(div, box)
}


第三种方法：
<div id="e1" onclick="aaa(this)">999</div>
<input id="e2" onblur="bbb(this)" style="display:none " type="text"/>


    function $ID(str) {
        return document.getElementById(str)
    }
    function aaa(box) {
        var inp=$ID("e2");
        inp.value=box.innerHTML;
        box.style.display="none";
        inp.style.display="";
        inp.focus();
    }
    function bbb(box) {
       var div=$ID("e1");
        div.innerHTML=box.value;
        div.style.display='block';
        box.style.display="none"
    }


第四种方法：就是这么简单

<div contenteditable="true">999</div>