HTML+jq动态添加节点

来源：互联网发布：网络攻击演示编辑：程序博客网时间：2024/05/16 02:00

新手一枚刚接触项目，将遇到的问题分享出来，如有不足，欢迎沟通指点！

添加按钮一枚！

<div class="layui-inline" id="zdUpdate">    <button class="layui-btn" id="add">        <i class="layui-icon">&#xe608;</i> 添加    </button></div>

jq代码触发+html创建容器默认隐藏，点击添加按钮后，将容器内数据，添加到指定位置

function btnInit() {        // 添加字典    $('#add').click(zdUpdate);}//动态添加节点zdUpdate = function () {    $('#dict_content').append($('#dict_item_template').html());}

<div id="dict_item_template" style="display: none">    <div class="layui-form-item js-dict-item">        <div class="layui-inline">            <label class="layui-form-label">值</label>            <div class="layui-input-inline">                <input type="text" name="num" value="" required lay-verify="required" autocomplete="off"                       class="layui-input">            </div>            <label class="layui-form-label">名称</label>            <div class="layui-input-inline">                <input type="text" name="name" value="" required lay-verify="required" placeholder="请输入名称"                       autocomplete="off"                       class="layui-input">            </div>            <div class="layui-inline">                <button class="layui-btn js-del">                    <i class="layui-icon">&#xe640;</i> 删除                </button>            </div>        </div>    </div></div>

阅读全文

0 0