一个有内容的标签，用原生JS点击按钮使内容变成可编辑状态，然后使用保存数据。这个是点击编辑按钮使得标签内容替换为文本域来实现的。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>JS编辑内容</title>
</head>
<body>
<div>
<b>电脑：</b><span >小米笔记本电脑</span><button οnclick="edit(this)">编辑</button>
</div>
<div>
<b>手机：</b><span>华为手机</span><button οnclick="edit(this)">编辑</button>
</div>
<script>
/*点击编辑即可要修改的内容*/
function edit(element) {
element.innerHTML="保存";
var prev=element.previousSibling;
var oldhtml=prev.innerHTML;
prev.innerHTML="";
var newObj=document.createElement("textarea");
newObj.className="textArea";
newObj.innerHTML=oldhtml;
prev.appendChild(newObj);
newObj.focus();
newObj.οnblur=function(){
alert(prev.id);
element.innerHTML="编辑";
prev.innerHTML=this.value?this.value:oldhtml;
}
}
</script>
</body>
</html>
来源：CSDN
作者：qq_28339819
链接：https://blog.csdn.net/qq_28339819/article/details/78735043