Javascript childNodes方法找不到我的字段名

我正试图在我的项目中实现这个扩展表单功能。但是字段名无法定位（控制台日志返回“undefined”），直到我将一个输入字段放在divs之外并直接放在父span标记下面。我不确定如何定位字段名并相应命名，因为我打算保留div

HTML:

年龄
等级
请选择
一级
二级

Javascript:

var counter = 0;
function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name;
        if (theName)
            newField[i].name = "data[Student][" + counter + "][" + theName + "]";
            console.log(newField[i].name);
    }
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
}

var计数器=0；
函数moreFields（）{
计数器++；
var newFields=document.getElementById（'readroot'）.cloneNode（true）；
newFields.id=''；
newFields.style.display='block'；
var newField=newFields.childNodes；
for（var i=0；i
childNodes
只返回直接的子元素。它将只在顶部级别查找具有
name
属性的元素。若要查找具有所需名称的所有子元素，请尝试

var newField = newFields.querySelectorAll('[name]');

要点：

虽然在这种情况下，您不需要使用这两种方法，但应该使用
.children
而不是
.childNodes
。后者将访问空白节点，这不会伤害任何东西，但不是您想要的

if（theName）
语句的主体缺少括号，这意味着每次通过循环都会执行console.log，即使在访问空白节点时也是如此。为避免此类问题，请将编辑器设置为缩进属性，并/或在代码中运行linter

if (theName) {
    newField[i].name = "data[Student][" + counter + "][" + theName + "]";
    console.log(newField[i].name);
}


我建议您更清楚地命名变量。您有一个名为
newFields
的变量，它是一个跨度，还有一个名为
newField
的变量，它是字段的集合

它是否破坏了您的任何功能？或者您认为未定义是一个问题。因为控制台不是必需的。它只是一个调试代码的函数。我们甚至可以删除它。是的。如果字段名定义不正确，恐怕无法保存数据。标记无效，在范围内不允许使用div。将外部范围更改为一个div。querySelectorAll（）方法查找第一个输入，age，但找不到年级输入。选择器也应该包含select元素，除非您同意它们都有相同的名称。将选择器更改为
[name]
，以拾取输入和选择。谢谢。我对Javascript完全陌生。谢谢您的支持！
if (theName) {
    newField[i].name = "data[Student][" + counter + "][" + theName + "]";
    console.log(newField[i].name);
}