JavaScript DOM学习第七章：表单的扩展

核心提示： 真正的表单项目在ID为readroot的DIV并且display值为none，这个DIV是一个模板，JavaScript DOM学习第七章：表单的扩展(2)，用户不能修改，当用户需要更多的表单的时候我们就复制这个模板然后添加在表单之后，添加表单项目下面的代码可以再需要的时候用来添加表单项目：01

真正的表单项目在ID为readroot的DIV并且display值为none。这个DIV是一个模板，用户不能修改。当用户需要更多的表单的时候我们就复制这个模板然后添加在表单之后。我们在一开始的就加载，这样当用户打开页面的时候就能看到。

这个DIV在表单之外，所以当用户提交表单的时候，这个模板的内容不会被提交。

ID为writeroot的SPAN是一个标记。新的生成的表单就插入在他的前面。

添加表单项目

下面的代码可以再需要的时候用来添加表单项目：

01　var　counter　=　0;
02　　
03　function　moreFields()　{
04　　　　　counter++;
05　　　　　var　newFields　=　document.getElementById('readroot').cloneNode(true);
06　　　　　newFields.id　=　'';
07　　　　　newFields.style.display　=　'block';
08　　　　　var　newField　=　newFields.childNodes;
09　　　　　for　(var　i=0;i<newField.length;i++)　{
10　　　　　　　　　var　theName　=　newField[i].name
11　　　　　　　　　if　(theName)
12　　　　　　　　　　　　　newField[i].name　=　theName　+　counter;
13　　　　　}
14　　　　　var　insertHere　=　document.getElementById('writeroot');
15　　　　　insertHere.parentNode.insertBefore(newFields,insertHere);
16　}
17　　
18　window.onload　=　moreFields;

首先我们需要一个计数器counter，因为所有的表单项都应该有唯一的一个名字。我们把计数器的值添加在生成name后面。初始化计数器：

1　var　counter　=　0;

编缉推荐阅读以下文章

• JavaScript DOM学习第九章：选取范围的介绍
• JavaScript DOM学习第八章：表单错误提示
• JavaScript DOM学习第六章：表单实例
• JavaScript DOM学习第五章：表单简介
• JavaScript DOM学习第四章：getElementByTagNames
• JavaScript DOM学习第三章：内容表格
• JavaScript DOM学习第二章：编辑文本
• JavaScript DOM学习第一章：W3C DOM简介
• javaScript DOM方法与属性摘要