时间戳

首页 > 解决方案 > 使用 JavaScript 修改子节点中的输入名称

javascript - 使用 JavaScript 修改子节点中的输入名称

问题描述

我需要帮助扩展这个 JavaScript（借自https://www.quirksmode.org/dom/domform.html）：

var appCounter = 0;
function anotherApp() {
    appCounter = appCounter + 1;
var newAppField = document.getElementById("keyApp").cloneNode(true);
    newAppField.id = '';
    newAppField.style.display = 'block';
    var newApp = newAppField.childNodes;
        for (var i = 0; i < newApp.length; i++) {
        var theName = newApp[i].name
        if (theName) {
    newApp[i].name = theName + appCounter;
        }
    }
    var insertApp = document.getElementById('keyApp');
    insertApp.parentNode.insertBefore(newAppField, insertApp);

    document.getElementById('appCount').value = appCounter
}

当我的表单中的元素是：

<div id="keyApp" style="display:none">
    <input type="text" name="application" id="application">
    <input type="text" name="usage" id="usage">
<\div>

但是当我div在输入周围添加 's （引导样式原因）时，我失去了更新输入名称的能力：

<div id="keyApp" style="display:none">
    <div class="col-md-2">
        <input type="text" name="application" id="application">
    </div>
    <div class="col-md-2">
        <input type="text" name="usage" id="usage">
    </div>
<\div>

如何扩展脚本以修改这些新的输入名称div？

标签： javascripthtmldom

解决方案

由于现在有另一层，因此您需要newApp[i].childNodes[0]现在获取以获取实际的输入元素。

newApp现在拥有div带有样式的元素列表col-md-2，您需要将子元素放入这些div元素中。

推荐阅读