2 yvonne221 Yvonne221 于 2016.03.20 20:40 提问

js表单内如何动态添加元素

已经在form内动态添加了一个div,该div中包含一个button,我希望点击button之后,这个div中动态添加一个text。但是点击完button之后,页面就自动刷新所有元素消失不见?请问各位大神是什么原因??
代码如下:
function add(){
var form = document.getElementById("form");

var div = document.createElement("div");
    div.style.border = "1px #CCC";
    div.style.borderStyle = "dashed";
    div.style.width = "200px";
    div.style.height = "200px";

var button = document.createElement("button");
    button.innerHTML = "再添加";      
    button.addEventListener(onclick, function() {
        var text = document.createElement("input");
            text.type = "text";  
            div.appendChild(text);                      
    })
    div.appendChild(button);

 form.appendChild(div);   
}

2个回答

devmiao
devmiao   Ds   Rxr 2016.03.20 22:42
wolalawo
wolalawo   2016.03.21 15:13

function add(){
var form = document.getElementById("form");
var div = document.createElement("div");
div.style.border = "1px #CCC";
div.style.borderStyle = "dashed";
div.style.width = "200px";
div.style.height = "200px";
form.appendChild(div);

    var button = document.createElement("input");
    button.type = "button"
    button.value = "再添加";  
    button.addEventListener("click",function(){
        var text = document.createElement("input");
            text.type = "text";  
            div.appendChild(text);
    })

    div.appendChild(button);
    form.appendChild(div);   
}
add();
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
FORM表单无法提交JavaScript动态添加的表单元素
说明:本例子是从网络上拷贝下来的 第一种情况: 说明:当前情况下,JavaScript动态添加的表单元素是不能提交到服务器端   第二种情况: 说明:这样情况下可以把js动态添加的表单元素提交到服务器   备注:在IE下,form表单放在table内,JavaScript动态生成的表单元素是可以提交到服务器的,但是在Chrome和Ope
js动态添加表单form元素
动态添加表单元素      function AddElement(mytype){  var mytype,TemO=document.getElementById("add");  var newInput = document.createElement("input");   newInput.type=mytype;   newInput.name="input1"; 
动态表单添加及动态删除元素
无标题文档 $(function(){    //绑定添加联系方式超链接的点击事件 $("#linkAdd").click( function(){ //创建新的联系方式的DIV元素 var div=$("删除"); //将新创建的div元素以最后一个子元素添加到contacts中 //div.appendTo($("#contacts")); $("#conta
form表单 无法提交js动态添加的表单元素遇到的坑
第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的   第二种情况, 才可以把js动态添加的表单元素提交到服务器端   总结:要保证form的完整性,和它放置目标html标签的完整性,例如:上面的table就不能用form标签把table和table的tr节点分开
JS动态添加的属性Form不能提交的问题
这两天开发过程中,遇到一个很诡异的问题。 JSP提交的时候那些固定写在form中的input的数据一个没少,缺少的是由JS动态写入form中的input。(但是IE可以提交成功,火狐,chrome都无法提交)   难道是为了安全性,JS动态写入的input不让提交?查了很多资料都没有这种说法   难道是没有写name属性?检查了也有。   难道是我这批input都是同一个name不行?我用
第13篇:Angular-表单动态添加删除
原文:http://webserver.300364.net/show/11019444150761540564.html angular本身不允许去操作DOM,在angular的角度来说,所有操作都以数据为核心,剩下的事情由angular来完成。所以说,想清楚问题的根源,解决起来也不是那么困难。   前提   那么,要做的这个添加删除要具有以下功能:     1、当数据只剩一条时,不允许
layui追加或者动态修改的表单元素“没效果”?
layui版本:2.2.6(考虑到一万年以后会有人遇到类似问题 先做个版本记录)关于该问题的layui官方文档地址:http://www.layui.com/doc/modules/form.html官方原文:有些时候,你的有些表单元素可能是动态插入的。这时 Form模块 的自动化渲染是会对其失效的。虽然我们没有双向绑定机制(因为我们叫经典模块化框架,偷笑.gif) 但没有关系,你只需要执行 fo...
form表单提交获取不到jquery动态添加字段中的值
解决方法: 将标签移动到标签外面就可以获取到值了
js获取html表单里面的某一元素的值
对于新手,在获取元素的信息时,常常会遇到如何准确选择到想要获取的元素问题例如:想要获取当前按钮所在行的某一元素值:当点击铅笔图标获取到当前行id的值0具体实现:html代码:<tbody id="tabletest"> <tr> <td class="td id">0</td> <td>admin</td
动态添加表单元素,并使用bootstrapValidator插件进行动态添加校验
一、前言      实际工作中,要实现表单元素的动态增加,并使用bootstrapValidator插件对动态添加的表单元素进行前台校验。在以前的工作中也使用过bootstrapValidator对表单元素进行校验,但涉及到的表单元素都是固定的,所以在页面载入时,对表单元素进行初始化就可以实现。虽然思路很明确,但由于对bootstrapValidator的用法不熟悉,在这个问题上还是浪费了很