JavaScript动态添加信息的实现

发布时间：2018-10-06 10:41:42 所属栏目：创业来源：站长网

导读：本日说下JS动态添加数据信息是怎样实现的。因为本人手段有限，以是只能用最傻的方法来做了。不外也算是实现了成果吧!就是点击按钮可以不绝的添加。我的思绪是这样式的，起首得有一个模版，然后点击模版的时辰，不绝的呈现这个模版的复成品就OK了，仿佛很

　　本日说下JS动态添加数据信息是怎样实现的。因为本人手段有限，以是只能用最傻的方法来做了。不外也算是实现了成果吧!就是点击按钮可以不绝的添加。

　　我的思绪是这样式的，起首得有一个模版，然后点击模版的时辰，不绝的呈现这个模版的复成品就OK了，仿佛很简朴，是的，确实很简朴，由于我也不知道怎么做步崆最优的，但它确实可以或许这样实现。

　　为了各人更好领略代码,我就不消Jquery.js来做了.其实没啥好说的了.就是点击按钮就在尾部把模版复制一份就行了,各人直接看实例,不大白的在QQ群(5678537,70210212)里提问吧。

　　查察DEMO：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS动态添加信息 - QQ技能群5678537.70210212</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <script type="text/javascript"> function Add(){ var info=document.getElementById("info"); var template=document.getElementById("template"); var LR=template.innerHTML; info.insertAdjacentHTML("BeforeEnd",LR) } function Save(){ var list = document.getElementById("info").getElementsByTagName("input"); for(var i=0;i<list.length;i++){ alert(list[i].value) } } </script> </head> <body> <p>可以用AJAX传值,也可以用request.form("txtName")这种情势获得值.</p> <div class="code"> <div id="template" style="display:block;display:none;"> <div> <div>姓名:<input type="text" name="txtName"/></div> <div>年数:<input type="text" name="txtAge"/></div> </div> </div> <div><input type="button" value="添加" onclick="Add()"/></div> <div id="info"></div> <div><input type="button" value="生涯" onclick="Save()"/></div> </div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提醒：可修改儿女码再运行!

　　（本文转载于：lovewebgames.com）

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

首富马斯克谈成功？他	从先行者到制定者，轻
中国互联网的新一轮机	马斯克想辞职做专业网