欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jsdom可编辑div

程序员文章站 2024-03-20 10:45:58
...
window.onload = function() {
    // 加载的时候就被初始化,此处的this是指id为oldDiv的div
    document.getElementById("divElement").ondblclick = function() {
        toReplace(this)
    }
}

// 此函数功能是新建一个input元素替换div
//当input元素失去焦点时又变回原来的div
toReplace = function(divElement) {
    // 创建一个input元素
    var inputElement = document.createElement("input");
    // 把obj里面的元素以及文本内容赋值给新建的inputElement
    inputElement.value = divElement.innerHTML;

    // 用新建的inputElement代替原来的oldDivElement元素
    divElement.parentNode.replaceChild(inputElement, divElement);
    // 当inputElement失去焦点时触发下面函数,使得input变成div
    inputElement.onblur = function() {
        //把input的值交给原来的div
        divElement.innerHTML = inputElement.value;
        //用原来的div重新替换inputElement
        inputElement.parentNode.replaceChild(divElement, inputElement);
    }
}