如何扩展JavaScript修改嵌套div中子节点的input元素名称？

Got it, let's break down why your script stopped working once you added those Bootstrap column divs. The original code only looks at the direct child nodes of the cloned keyApp container—but now your inputs are tucked inside extra <div class="col-md-2"> elements. That means the loop never actually reaches the inputs to update their names. Here's how to fix this, with two solid options:

Option 1: Use querySelectorAll (Simplest & Most Efficient) #

This method directly targets all <input> elements inside the cloned div, regardless of how deeply they're nested. Perfect for Bootstrap's column structure:

var appCounter = 0;
function anotherApp() {
    appCounter++;
    var newAppField = document.getElementById("keyApp").cloneNode(true);
    newAppField.id = '';
    newAppField.style.display = 'block';
    
    // Grab ALL input elements inside the cloned container
    var inputs = newAppField.querySelectorAll('input');
    for (var i = 0; i < inputs.length; i++) {
        var theName = inputs[i].name;
        if (theName) {
            inputs[i].name = theName + appCounter;
            // Optional: Update IDs too (since page IDs must be unique)
            inputs[i].id = theName + appCounter;
        }
    }
    
    var insertApp = document.getElementById('keyApp');
    insertApp.parentNode.insertBefore(newAppField, insertApp);
    document.getElementById('appCount').value = appCounter;
}

Why this works: #

querySelectorAll('input') scans every level of the cloned div's DOM tree to find inputs, so it doesn't matter if they're wrapped in Bootstrap columns or other containers. I also added an optional line to update the input IDs—this is a good practice because HTML requires all IDs to be unique on a page.

Option 2: Recursive Node Traversal (For Complex Nested Structures) #

If you ever have even deeper nested elements (like inputs inside tabs, accordions, etc.), a recursive function will traverse every node in the cloned container to find inputs:

var appCounter = 0;
function anotherApp() {
    appCounter++;
    var newAppField = document.getElementById("keyApp").cloneNode(true);
    newAppField.id = '';
    newAppField.style.display = 'block';
    
    // Recursive function to check every node for inputs
    function updateInputNames(node) {
        // Check if this node is an input with a name attribute
        if (node.tagName === 'INPUT' && node.name) {
            node.name = node.name + appCounter;
            node.id = node.name; // Sync ID with updated name
        }
        // Recurse through all child nodes
        for (var i = 0; i < node.childNodes.length; i++) {
            updateInputNames(node.childNodes[i]);
        }
    }
    
    // Start traversing from the cloned div
    updateInputNames(newAppField);
    
    var insertApp = document.getElementById('keyApp');
    insertApp.parentNode.insertBefore(newAppField, insertApp);
    document.getElementById('appCount').value = appCounter;
}

Why this works: #

This function digs through every single child node (and their children) of the cloned container, ensuring no input gets missed—even if your form structure gets more complex later on.

Both solutions will work with your updated Bootstrap form structure. The first option is ideal for your current setup, while the second gives you flexibility for future changes.

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