用javascript实现div可编辑的常见方法

使用JavaScript实现DIV可编辑通常有以下几种方法：

1. contentEditable属性

contentEditable属性是HTML5的内容编辑属性，可以将HTML元素设置为可编辑的。我们可以将一个div元素的contentEditable属性设置为true，使其成为可编辑。

HTML代码：

<div contenteditable="true">
    这是一个可编辑的div
</div>

JavaScript代码：

let div = document.querySelector('div');
div.contentEditable = true;

1. 绑定事件

我们可以监听DIV元素的点击或者双击事件，并将DIV元素中的HTML代码替换为一个可编辑的input元素。当用户编辑完成后，再将input元素中的值替换回去。

HTML代码：

<div id="myDiv">
    这是一个可编辑的div
</div>

JavaScript代码：

let div = document.getElementById('myDiv');

// 将div元素中的HTML代码替换为input元素
div.addEventListener('click', function() {
    let input = document.createElement('input');
    input.type = 'text';
    input.value = div.innerHTML;
    div.innerHTML = '';
    div.appendChild(input);

    // 当input元素失焦时，将input元素中的值替换回去
    input.addEventListener('blur', function() {
        div.innerHTML = input.value;
    });
});

以上是两种实现DIV可编辑的常见方法。其中第一个方法简单易行，但对样式的限制比较大，第二个方法比较灵活，但需要监听事件并手动替换HTML代码，相对复杂一些。