介绍
小编给大家分享一下JavaScript怎么实现动态添加形式表单元素的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
具体如下:
之前写过类似的文章(如:JavaScript实现的动态添加表单元素输入、按钮等),现在看来比较初级,弄一个高级的简单的
<强>情景:强>后台要上传游戏截的图,截图数量不确定,因此使用动态添加输入节点的方法去实现这个效果
<强>主要用到的函数有:强>
. getelementbyid ();
objNode.parentNode;
objNode.cloneNode ();
objNode.removeAtrribute ();
objNode.innerHTML ();
objNode.appendChild ();
<强> html: 强>
& lt; div 类=皐ell well-sm"比; & lt;才能div 类=癴orm-group"比; ,,,& lt; label 类=癴orm-label"在游戏截图:& lt;/label> ,,,& lt; input 类型=癴ile", name=癹ietu[]“,类=癴orm-input"比; ,,,& lt; span 类=癴orm-tip", onclick=癮dd_jietu()“祝辞& lt; font 颜色=? 428 bca"在点击添加游戏截图& lt;/font> & lt;/span> & lt;才能/div> & lt;才能div 类=癴orm-group", id=癮dd_jietu"比; ,,,& lt; label 类=癴orm-label"在游戏截图:& lt;/label> ,,,& lt; input 类型=癴ile", name=癹ietu[]“,类=癴orm-input"比; & lt;才能/div> & lt;/div>
<强> javascript: 强>
& lt; script 类型=拔谋?javascript"比; function add_jietu () { var 才能;add_jietu =, . getelementbyid (& # 39; add_jietu& # 39;); var 才能;nodeFather =, add_jietu.parentNode; var 才能;node_clone =, add_jietu.cloneNode (); 时间=content 才能;add_jietu.innerHTML; node_clone.removeAttribute才能(& # 39;id # 39;); 时间=node_clone.innerHTML 才能;内容; nodeFather.appendChild才能(node_clone); } & lt;/script>
<强>注意:强>
1。js第6行使用的是“克隆节点“函数,克隆后的节点里边并没有html,需要第9行的代码去填充内容
2。使用克隆功能,因为该方法生成的变量类型是“节点类型“,才可以用到列表末尾()函数里做参数
3。则是nextSibling节点的和lastChild属性得到的变量是文本类型(在chrome的调试窗口中看到的)
以上是“JavaScript怎么实现动态添加形式表单元素的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!