如何使用 JavaScript 实现一个简单的双击编辑功能？

实现双击编辑功能

//定义元素
const element = document.querySelector('#yourElement')

//定义变量 来存储最初的内容
let initialContent

//为元素添加双击事件
element.addEventListener("dblclick", function() {
    //将最初的内容赋值给变量
    initialContent = element.innerText
    
    //把文本替换为文本框input
    element.innerHTML = `<input type="text" class="editField">`
    
    //把输入框中的原始文本内容赋值给input
    let editField = document.querySelector('.editField')
    editField.value = initialContent

    //为输入框添加focus事件
    editField.addEventListener("focus", function() {
        editField.classList.add("active")
    })

    //监听输入框失去焦点时执行 用来保存修改后的新文本
    editField.addEventListener("blur", function() {
        element.innerText = editField.value
    })
})