javascript动态添加form表单元素

简介: 2014年11月7日 17:10:40 之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主要用到的函数有:  document.

2014年11月7日 17:10:40

之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的

情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果

主要用到的函数有: 

document.getElementById();

objNode.parentNode;

objNode.cloneNode();

objNode.removeAtrribute();

objNode.innerHTML();

objNode.appendChild();

html:

 1 <div class="well well-sm">
 2     <div class="form-group">
 3         <label  class="form-label">游戏截图:</label>
 4         <input type="file"  name="jietu[]" class="form-input">
 5         <span class="form-tip" onclick="add_jietu()"><font color="#428bca">点击添加游戏截图</font></span>
 6     </div>
 7     <div class="form-group" id="add_jietu">
 8         <label  class="form-label">游戏截图:</label>
 9         <input type="file"  name="jietu[]" class="form-input">
10     </div>
11 </div>

javascript:

 1 <script type="text/javascript">
 2 function add_jietu()
 3 {
 4     var add_jietu = document.getElementById('add_jietu');
 5     var nodeFather = add_jietu.parentNode;
 6     var node_clone = add_jietu.cloneNode();
 7     content = add_jietu.innerHTML;
 8     node_clone.removeAttribute('id');
 9     node_clone.innerHTML = content;
10     nodeFather.appendChild(node_clone);
11 }
12 </script>

注意:

1. js第6行使用的是"克隆节点"函数,克隆后的节点里边并没有html,需要第9行的代码去填充内容

2. 使用克隆功能,因为该方法生成的变量类型是"节点类型", 才可以用到appendChild()函数里做参数

3. 节点的 nextSibling 和 lastChild 属性得到的变量是 Text类型(在chrome的调试窗口中看到的)

 

Finger PHP 框架

目录
相关文章
|
3天前
|
JavaScript 前端开发
JavaScript如何遍历表单元素?
JavaScript如何遍历表单元素?
|
3天前
编程笔记 html5&css&js 022 HTML表单概要
编程笔记 html5&css&js 022 HTML表单概要
|
21天前
|
移动开发 JavaScript 前端开发
分享88个表单按钮JS特效,总有一款适合您
分享88个表单按钮JS特效,总有一款适合您
25 1
|
22天前
|
存储 移动开发 JSON
分享86个表单按钮JS特效,总有一款适合您
分享86个表单按钮JS特效,总有一款适合您
24 1
|
3天前
|
移动开发 HTML5
编程笔记 html5&css&js 024 HTML表单元素
编程笔记 html5&css&js 024 HTML表单元素
|
3天前
编程笔记 html5&css&js 023 HTML表单属性
编程笔记 html5&css&js 023 HTML表单属性
|
7天前
|
JavaScript 前端开发
js制作动态表单
js制作动态表单
7 0
|
23天前
|
移动开发 JSON JavaScript
分享76个表单按钮JS特效,总有一款适合您
分享76个表单按钮JS特效,总有一款适合您
16 5
|
25天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
19 0
|
28天前
|
前端开发 JavaScript API
JavaScript中多种获取数组最后一个元素的策略。
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。

相关产品

  • 云迁移中心