JavaScript 就地编辑HTML节点实现代码

<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>点击编辑当前内容</title> <script type="text/javascript"> var EditField={ configure:function（id）{ this.id=id; this.createElements（）; //动态生成编辑输入框 this.toScan（）; //初始化动态生成的输入框和按钮、待编辑的DOM元素的display属性 this.addEvents（）; //给相关的DOM元素添加事件监听器 }, events:function（elem,type,fn）{ //用于添加事件的通用函数 if（elem.attachEvent）{ elem.attachEvent（"on"+type,fn）; }else if（elem.addEventListener）{ elem.addEventListener（type,fn,false）; }else{ elem["on"+type]=fn; } return elem; }, addEvents:function（）{ //添加事件 var that=this; this.events（this.btnSubmit,"click",function（）{ that.save（）; }）; this.events（this.btnCancel,"click",function（）{ that.cancel（）; }）; this.events（document.getElementById（this.id）,"click",function（）{ that.toEdit（）; }）; }, insertAfter:function（newNode,referenceNode）{ //将动态生成的输入框和按钮插入到待编辑元素的后面 if （referenceNode.nextSibling） { referenceNode.parentNode.insertBefore（newNode, referenceNode.nextSibling）; }else{ var p=referenceNode.parentNode || document.body; p.appendChild（newNode）; } }, createElements:function（）{ //动态生成输入框和按钮 this.divContainer=document.createElement（"div"）; //this.parentElement.appendChild（this.divContainer）; this.insertAfter（this.divContainer,document.getElementById（this.id））; this.input=document.createElement（"input"）; this.input.type="text"; this.input.value=document.getElementById（this.id）.innerHTML; //初始化值 this.divContainer.appendChild（this.input）; this.btnSubmit=document.createElement（"input"）; this.btnSubmit.value="Submit"; this.btnSubmit.type="button"; this.divContainer.appendChild（this.btnSubmit）; this.btnCancel=document.createElement（"input"）; this.btnCancel.type="button"; this.btnCancel.value="Cancel"; this.divContainer.appendChild（this.btnCancel）; }, toEdit:function（）{ //转换成编辑状态 this.divContainer.style.display="block"; document.getElementById（this.id）.style.display="none"; this.setValue（）; }, toScan:function（）{ //转换成浏览状态 document.getElementById（this.id）.style.display="block"; this.divContainer.style.display="none"; }, getValue:function（）{ //获取输入框的值 return this.input.value; }, setValue:function（）{ //设置输入框的值 this.input.value=document.getElementById（this.id）.innerHTML; }, save:function（）{ //保存编辑结果 document.getElementById（this.id）.innerHTML=this.getValue（）; this.toScan（）; }, cancel:function（）{ //取消当前的编辑 this.toScan（）; } }; onload=function（）{ EditField.configure（"p"）; //调用configure函数，确定那个DOM元素进行就地编辑 } </script> </head> <body> <h3>Edit Demo</h3> <p id="p">脚本之家 www.jb51.net<br/> Copyright:Super sha.<br/> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]