01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.<title>直接双击页面元素进行修改的HTML代码</title>
06.<script type="text/javascript">
07.function ShowElement(element)
08.{
09. var oldhtml = element.innerHTML; //获得元素之前的内容
10. var newobj = document.createElement(''input''); //创建一个input元素
11. newobj.type = ''text''; //为newobj元素添加类型
12. newobj.value=oldhtml;
13. element.innerHTML = ''''; //设置元素内容为空
14. element.appendChild(newobj); //添加子元素
15.
16. newobj.focus(); //获得焦点
17. newobj.onfocus = function()
18. {
19. element.ondblclick='''';//取消元素的双击事件
20. }
21. //设置newobj失去焦点的事件
22. newobj.onblur = function()
23. {
24. element.innerHTML = this.value ? this.value : oldhtml; //当触发时判断newobj的值是否为空，为空则不修改，并返回oldhtml
25. element.ondblclick = function()//还原元素的双击事件
26. {
27. ShowElement(this);
28. }
29. }
30.}
31.</script>
32.</head>
33.
34.<body>
35.<dl>
36. <dt>用户名：</dt>
37. <dd ondblclick="ShowElement(this)">小草</dd>
38. <dt>个人宣言</dt>
39. <dd ondblclick="ShowElement(this)">这家伙很懒，什么也没留下！</dd>
40.</dl>
41.</body>
42.</html>