动态添加表单元素 经典代码
程序员文章站
2022-07-06 10:57:14
动态添加表单元素 经典代码
[html]
动态添加表单元素...</div>
<div class="content">
动态添加表单元素 经典代码<br>
[html] <br>
<html > <br>
<head> <br>
<title>动态添加表单元素</title> <br>
</head> <br>
<script language="javascript"> <br>
function addelement(mytype){ <br>
var mytype,temo=document.getelementbyid("add"); <br>
var newinput = document.createelement("input"); <br>
newinput.type=mytype; <br>
newinput.name="input1"; <br>
temo.appendchild(newinput); <br>
var newline= document.createelement("br"); <br>
temo.appendchild(newline); <br>
} <br>
</script> <br>
<body> <br>
<form action="" method="get" name="frm"> <br>
<p id="add"> <br>
<input type="text" name="textfield"> <br>
<br>
</p> <br>
</form> <br>
<input name="" type="button" value="新建文本框" onclick="addelement('text')" /> <br>
<input name="" type="button" value="新建复选框" onclick="addelement('checkbox')" /> <br>
<input name="" type="button" value="新建单选框" onclick="addelement('radio')" /> <br>
<input name="" type="button" value="新建文件域" onclick="addelement('file')" /> <br>
<input name="" type="button" value="新建密码框" onclick="addelement('password')" /> <br>
<input name="" type="button" value="新建提交按钮" onclick="addelement('submit')" /> <br>
<input name="" type="button" value="新建恢复按钮" onclick="addelement('reset')" /> <br>
</body> <br>
</html> <br><br>
作者：primary_wind </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1660140.html">
Thinkphp编辑器扩展类kindeditor使用方法 </a>
</p>
<p>
下一篇： <a href="/article/1660142.html">
react单页面微信授权后怎么返回原来地址教程 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2163487.html" target="_blank" title="javascript下给元素添加事件的方法与代码">
<h2>
javascript下给元素添加事件的方法与代码 </h2>
</a>
</li>
<li>
<a href="/article/2138246.html" target="_blank" title="jQuery实现动态添加和删除input框实例代码">
<h2>
jQuery实现动态添加和删除input框实例代码 </h2>
</a>
</li>
<li>
<a href="/article/2135097.html" target="_blank" title="jquery如何给对象动态添加属性以及选择器、事件的绑定？（代码教程）">
<h2>
jquery如何给对象动态添加属性以及选择器、事件的绑定？（代码教程） </h2>
</a>
</li>
<li>
<a href="/article/2134903.html" target="_blank" title="vue element动态渲染、移除表单并添加验证的实现">
<h2>
vue element动态渲染、移除表单并添加验证的实现 </h2>
</a>
</li>
<li>
<a href="/article/2133558.html" target="_blank" title="jQuery动态添加、删除元素的方法">
<h2>
jQuery动态添加、删除元素的方法 </h2>
</a>
</li>
<li>
<a href="/article/2128255.html" target="_blank" title="Ajax中通过JS代码自动获取表单元素值的示例代码">
<h2>
Ajax中通过JS代码自动获取表单元素值的示例代码 </h2>
</a>
</li>
<li>
<a href="/article/2119088.html" target="_blank" title="Vue.js动态添加、删除选题的实例代码">
<h2>
Vue.js动态添加、删除选题的实例代码 </h2>
</a>
</li>
<li>
<a href="/article/2117679.html" target="_blank" title="Vue+Element实现动态生成新表单并添加验证功能">
<h2>
Vue+Element实现动态生成新表单并添加验证功能 </h2>
</a>
</li>
<li>
<a href="/article/2096980.html" target="_blank" title="原生JS实现动态添加新元素、删除元素方法">
<h2>
原生JS实现动态添加新元素、删除元素方法 </h2>
</a>
</li>
<li>
<a href="/article/2094547.html" target="_blank" title="jquery mobile动态添加元素之后不能正确渲染解决方法说明">
<h2>
jquery mobile动态添加元素之后不能正确渲染解决方法说明 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>