js动态创建input框

最新推荐文章于 2024-08-18 20:42:40 发布

牧童牵黄牛

最新推荐文章于 2024-08-18 20:42:40 发布

阅读量5.0k

点赞数 5

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_41692437/article/details/123236610

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文探讨了如何使用HTML和JavaScript实现动态添加和删除表单元素的功能。通过示例代码展示了如何创建一个复选框，当点击添加按钮时在页面上增加新的输入字段，而点击删除按钮则移除相应元素。这一交互对于前端开发中的动态表单构建至关重要。

摘要由CSDN通过智能技术生成

1.html代码

<div id="details_p">
     <div class="form-inline">
        <label><input class="checkbox" type="checkbox" name="link" id="link_check">link<input type="text" name="link_value" placeholder="0" ></label> <input type="button" name="" onclick="add_div()" id="add_link" value="+"> <br/><br/>
      </div>
</div>
<div id="details" style="display:none;">
     <div class="form-inline">
        <label>&nbsp;&nbsp;&nbsp;&nbsp;link<input type="text" name="link_value" placeholder="0" ></label> <input type="button" name="value" onclick="del_div(this)"  value="-"> <br/><br/>
      </div>
</div>

2.js部分

var detail_div = 1;
    function add_div() {
        var e = document.getElementById("details");
        var div = document.createElement("div");
        div.className = "form-group";
        div.id = "details" + detail_div;
        div.innerHTML = e.innerHTML;
        document.getElementById("details_p").appendChild(div);
        detail_div++;
    }

    function del_div(obj) {
    	var did_id = obj.parentNode.parentNode.id;
    	var did = did_id.substring(7);
      if(detail_div >1){
            var id = "details" + did.toString();
            var e = document.getElementById(id);
            document.getElementById("details_p").removeChild(e);
            detail_div--;
        }
    }

需要注意，上面html可以只写一个，然后下面步骤也会少一些，但是就会造成上面的一个和下面的子类项都是一样的

因为我这边需要最上面的和下面的不一样