JavaScript DOM学习第二章：编辑文本

核心提示： 1z.insertBefore(y,obj);同样的插入Ready按钮：1z.insertBefore(butt,obj);现在就成了这样：z|---|||||[more]y(TEXTAREA)butt(BUTTON)P[more]然后删除段落，现在看起来就好像是文本框和按钮代替了之前的段落，J

1　z.insertBefore(y,obj);

同样的插入Ready按钮：

1　z.insertBefore(butt,obj);

现在就成了这样：

　　　　　　　　　　　　　　　　　　　　　　　　z
　　　　　　　　　　　　　　　　　　　　　　　　|
　　　　---------------------------------------
　　　　|　　　　　　　|　　　　　　　　　　　|　　　　　　　　　　　|　　　　　|
　　[more]　y(TEXTAREA)　　butt(BUTTON)　　P　　　[more]

然后删除段落。现在看起来就好像是文本框和按钮代替了之前的段落。

直到现在，插入文本框之后，我们才能把段落的innerHTML放置在文本框内。Mozilla里面不支持在插入之前给文本框内添加内容。

　y.value　=　x;

为了用户方便给文本框焦点：

　y.focus();

然后设置editing为true。

　editing　=　true;
}

将文本框转换为P

当用户点击Ready按钮，就应该反过来了。这个由saveEdit()函数来完成。

function　saveEdit()　{

得到TEXTAREA（这里假设整个页面只有一个TEXTAREA）：

　var　area　=　document.getElementsByTagName('TEXTAREA')[0]

创建一个新的段落并保存：

1　var　y　=　document.createElement('P');

找到文本框的父元素：新的段落需要添加到那去：

1　var　z　=　area.parentNode;

将文本框的值存储在新的段落里：

1　y.innerHTML　=　area.value;

然后把新的段落插入在文本框之前：

1　z.insertBefore(y,area);

移除文本框：

1　z.removeChild(area);

移除Ready按钮（同样的，假设页面只有一个按钮）：

1　z.removeChild(document.getElementsByTagName('button')[0]);

然后设置editing为false：用户停止编辑：

1　　　　　editing　=　false;
2　}

事件

在函数之外，设置一个整个页面的onclick事件：

1　document.onclick　=　catchIt;

翻译地址：http://www.quirksmode.org/dom/cms.html

文章出处：http://beiyu.cnblogs.com

编缉推荐阅读以下文章

• JavaScript DOM学习第六章：表单实例
• JavaScript DOM学习第五章：表单简介
• JavaScript DOM学习第四章：getElementByTagNames
• JavaScript DOM学习第三章：内容表格
• JavaScript DOM学习第一章：W3C DOM简介
• javaScript DOM方法与属性摘要