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

核心提示： 然后是实际的函数，我们给计数器加1：1functionmoreFields(){2counter++;然后复制我们的模板，JavaScript DOM学习第七章：表单的扩展(3)，移除ID，并且把display设置为block，这样用户进入的时候就能看到：1window.onload=moreF

然后是实际的函数。我们给计数器加1：

1　function　moreFields()　{
2　　　　　counter++;

然后复制我们的模板，移除ID，并且把display设置为block。readroot应该是整个文档里面唯一的ID，复制模板后应该显示出来让用户看到。

1　var　newFields　=　document.getElementById('readroot').cloneNode(true);
2　newFields.id　=　'';
3　newFields.style.display　=　'block';

我们遍历这个拷贝的子元素：

1　var　newField　=　newFields.childNodes;
2　for　(var　i=0;i<newField.length;i++)　{

如果子元素有name属性，那么我们就在name值上加上计数器的值，以保证他的唯一性：

1　　　　　var　theName　=　newField[i].name
2　　　　　if　(theName)
3　　　　　　　　　newField[i].name　=　theName　+　counter;
4　}

现在这个拷贝已经准备好插入了。我们把他插入到writeroot之前：

1　　　　　var　insertHere　=　document.getElementById('writeroot');
2　　　　　insertHere.parentNode.insertBefore(newFields,insertHere);
3　}

然后我们在页面加载的时候就执行一次，这样用户进入的时候就能看到：

1　window.onload　=　moreFields;

移除表单项

每一个模板的拷贝都有一个移除按钮:

1　<input　type="button"　value="Remove　review"
2　　　　　　/><br　/><br　/>

点击这个按钮就会从移除他的父元素（DIV）。整个生成的表单就都会消失，并且不会再出现。

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

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

编缉推荐阅读以下文章

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