如何调整JS动态生成Div的位置及现有代码错误排查

现有代码核心问题 #

• 重复ID冲突：HTML规范要求页面ID全局唯一，你动态生成的所有分组都复用了name、latin、field、showGroups等相同ID，导致JS选择器只会匹配到第一个出现的对应元素，点击子组添加按钮时，永远只能读取第一个分组的下拉值，子元素也只会插入到第一个分组的容器内。
• 缺少初始化逻辑：需求要求页面加载时自动生成分组、支持从JSON加载数据批量生成100+元素，现有代码仅实现了点击按钮新增单个分组的逻辑，没有页面初始化触发、JSON遍历、批量循环生成的相关代码。
• 子组添加上下文缺失：addChildFilter方法没有绑定当前触发的分组上下文，无法识别要给哪个分组新增子元素。
• 依赖缺失：代码中用到了jscolor颜色选择类，但没有引入对应的jscolor插件资源，导致颜色选择功能失效。

动态生成Div的位置调整方法 #

• 控制插入顺序：不要仅使用append（插到容器末尾），可根据需求选择对应方法：
  • prepend()：插到目标容器最开头
  • insertBefore(目标元素)：插到指定元素的前面
  • insertAfter(目标元素)：插到指定元素的后面
• 调整布局位置：给生成的div添加自定义类或者内联样式，通过CSS控制位置：
  • 用margin、padding调整元素间距
  • 用position: absolute/relative/fixed配合top/left等属性做精准定位
  • 直接用Bootstrap自带的栅格偏移类、flex布局类调整位置

修复后的完整代码 #

<!doctype html>
<html lang="fa" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <!-- 引入缺失的jscolor依赖 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.4.7/jscolor.min.js"></script>
    <title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
    <div id="showFilters">
        <!-- GROUP -->
    </div>
    <div class="w-100 text-center mt-4">
        <p>Add new group</p>
        <a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">
            <i class="fas fa-plus"></i>
        </a>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    let count = 0;
    // 新增分组公共方法
    function addNewGroup() {
        count++;
        let html = '<div class="position-relative my-4 border p-3 rounded">'+ '<div class="row">'+ '<div class="col-md-4 mb-3">'+ '<label for="name_'+count+'">Name</label>'+ '<input type="text" id="name_'+count+'" class="form-control" name="filters['+count+'][name]">'+ '</div>'+ '<div class="col-md-4 mb-3">'+ '<label for="latin_'+count+'">Latin</label>'+ '<input type="text" id="latin_'+count+'" class="form-control" name="filters['+count+'][latin]">'+ '</div>'+ '<div class="col-md-4 mb-3">'+ '<label for="field_'+count+'">Select a field</label>'+ '<select id="field_'+count+'" class="form-select" name="filters['+count+'][field]">'+ '<option value="1">CheckBox</option>'+ '<option value="2">Color</option>'+ '</select>'+ '</div>'+ '</div>'+ '<div id="showGroups_'+count+'" class="ms-4 my-3"> '+ '</div>'+ '<div class="w-100 text-center">'+ '<p>Add new subgroup.</p>'+ '<a onclick="addChildFilter('+count+')" class="bg-danger text-info pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">'+ '<i class="fas fa-plus"></i>'+ '</a>'+ '</div>'+ '</div>';
        $('#showFilters').append(html);
    }
    // 点击按钮新增分组
    $('#addFilter').click(function () {
        addNewGroup();
    });
    // 新增子组方法，传入当前分组的count标识
    function addChildFilter(groupId) {
        count++;
        let selectedField = $('#field_'+groupId).val();
        if (selectedField == 1) {
            let html = '<div class="w-100">'+ '<div class="col-md-4 mb-3 position-relative">'+ '<label for="child_name_'+count+'">Check Box Name</label>'+ '<input type="text" id="child_name_'+count+'" class="form-control" name="filters['+count+'][name]">'+ '</div>'+ '</div>';
            $('#showGroups_'+groupId).append(html);
        }
        if (selectedField == 2) {
            let html = '<div class="position-relative">'+ '<div class="row">'+ '<div class="col-md-6 mb-3">'+ '<label for="child_name_'+count+'">Color Name</label>'+ '<input type="text" id="child_name_'+count+'" class="form-control" name="filters['+count+'][name]">'+ '</div>'+ '<div class="col-md-6 mb-3">'+ '<label for="code_'+count+'">Code Color</label>'+ '<input type="text" id="code_'+count+'" class="form-control jscolor" name="filters['+count+'][code]">'+ '</div>'+ '</div>'+ '</div>';
            $('#showGroups_'+groupId).append(html);
            // 初始化新增的jscolor实例
            new jscolor(document.getElementById('code_'+count));
        }
    }
    // 页面初始化逻辑，批量生成分组
    $(document).ready(function() {
        // 模拟批量生成分组，可按需修改数值生成100+分组
        const groupNum = 10;
        for(let i=0; i<groupNum; i++) {
            addNewGroup();
        }
        // 如果是从外部JSON加载数据，参考写法：
        // $.getJSON('你的JSON文件路径', function(data) {
        //     for(let i=0; i<data.groups.length; i++) {
        //         addNewGroup();
        //         // 此处可新增逻辑给生成的表单赋值JSON对应字段
        //     }
        // })
    })
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者user15514832