Javascript 获取子节点的子节点

所以我克隆了这个div，让所有的孩子都在里面。但里面是一个列表，列表中是输入。两个部门的孩子都是李的。有没有办法在继续克隆整个部门的同时，更深入地挖掘并获得李的孩子们。表单的其余部分在ul中，因此我需要将其作为一个整体进行克隆，以保留格式。div im克隆是我制作的一个模板

分区：

<div id="add_contact" style="display:none" >
    <li>
    <label class="description" for="element_3"><h2>Contact</h2> </label>
        <span>
            <input id="element_3_1" name= "acct_first" onchange="javascript:contacts();" value=" " class="element text" maxlength="255" size="20" value=""/>
            <label>First</label>
        </span>
        <span>
            <input id="element_3_2" name= "acct_last" onchange="javascript:contacts();" class="element text" maxlength="255" size="20" value=""/>
            <label>Last</label>
        </span> 
        </li>       
    <li >
        <label class="description" for="element_27">Email Address </label>
        <div>
            <input id="element_27" name="acct_cont" onchange="javascript:contacts();" class="element text large" type="text" maxlength="200" value=""/> 
        </div>
        </li>
        <li>
        <label class="description" for="element_4">Phone </label>
        <span>
            <input id="element_4_1" name="acct_phone" onchange="javascript:contacts();" class="element text" size="20" maxlength="20" value="" type="text"> 
            <label for="element_4_1">Please Include Country Code If Outside The United States</label>
            <p class="guidelines" id="guide_4_1"><small>Please Include Country Code If Outside The United States</small></p>
        </span>
        </li>       
        <li>
        <label class="description" for="element_13">Fax </label>
        <span>
            <input id="element_13_1" name="acct_fax" onchange="javascript:contacts();" class="element text" size="20" maxlength="20" value="" type="text"> 
            <label for="element_13_1"></label>
        </span>
        </li>   
        <li>
        <label class="description" for="element_6">Type Of Contact (Select all that apply) </label>
            <span>
            <input type="checkbox" name="contact" value="">Purchasing<br>
            <!--<p class="guidelines" id="guide_6_1"><small>For Questions</small></p>-->
            </span>
            <span>
            <input type="checkbox" name="contact" value="">Quality Control<br>
            </span>
            <span>
            <input type="checkbox" name="contact" value="">Accounts Payable<br>
            </span>
            </br>
    </li>
</div>

接触
弗斯特
最后


电子邮件地址


电话
如果在美国境外，请包括国家代码
如果在美国境外，请包括国家代码


传真


联系人类型（选择所有适用的）
采购

质量控制

应付账款

还有剧本：

<script>

var counter = 1;

function moreFields() {
    counter++;
    var newFields = document.getElementById('add_contact').cloneNode(true);

    newFields.id = '';
    for (var index = 0; index < newFields.length; index++) {
        console.log(newField[i]);
    }
    newFields.style.display = 'block';
    var newField = newFields.children;



    for (var i=0; i<newField.length;i++) {
        var theName = newField[i].name


            newField[i].name = theName + counter;
            newField[i].value=newField[i].name;
            newField[i].id=newField[i].name;




    }
    var insertHere = document.getElementById('add_contact');
    insertHere.parentNode.insertBefore(newFields,insertHere.nextSibling);

}


</script>

var计数器=1；
函数moreFields（）{
计数器++；
var newFields=document.getElementById（'add_contact'）.cloneNode（true）；
newFields.id=''；
对于（var index=0；index
counter++;
var newFields = document.getElementById('add_contact').cloneNode(true);
var newInputs = newFields.getElementsByTagName('input');

newFields.id = '';
for (var index = 0; index < newInputs.length; index++) {
    console.log(newInputs[i]);
}

counter++；
var newFields=document.getElementById（'add_contact'）.cloneNode（true）；
var newInputs=newFields.getElementsByTagName（'input'）；
newFields.id=''；
对于（var index=0；index
您是否考虑过使用递归？例如，在您的代码中，我猜这是您希望在所有子节点上执行的位：

var newField = newFields.children;
for (var i=0; i<newField.length;i++) {
    var theName = newField[i].name
        newField[i].name = theName + counter;
        newField[i].value=newField[i].name;
        newField[i].id=newField[i].name;
}

var newField=newFields.children；
对于（var i=0；它看起来应该可以工作。我会先尝试一下。当我发布这些新字段的内容时，只要我有唯一的名称，您是否预见到或有过这方面的经验？应该正确选择它。对于输入和所有其他元素，
id
应该是唯一的。您可以选择eve通过执行
getElementsByTagName（“*”）
创建元素。这在调试器中非常有效，改变了我需要它的一切，但当我将它添加到表单中时，我遇到了fan var insertHere=document.getElementById（'add_contact'）；insertHere.parentNode.insertBefore（newFields，insertHere.nextSibling）；它在做什么？你希望它做什么？如果你插入
newInputs
，你只是插入
我编辑了上面的我确实让它插入了新字段，只是没有插入它们html是不变的，我现在正在通过调试器，但我猜在编辑newInputs时，新字段没有被更新他输入
    function recursiveBit(element,counter) {
        var theName = newField[i].name
        element.name = theName + counter;
        element.value=newField[i].name;
        element.id=newField[i].name;
        var children = element.children;
        for (var i=0; i<children.length;i++) {
            recursiveBit(children[i],counter);
        }
    }

function moreFields() {
    counter++;
    var elementToCopy = document.getElementById('add_contact');
    var newFields = elementToCopy.cloneNode(true);
    newFields.id = '';
    for (var index = 0; index < newFields.length; index++) {
        console.log(newField[i]);
    }
    newFields.style.display = 'block';
    for (var i=0; i<newField.length;i++) {
        recursiveBit(newField[i]);
    }
    insertHere.parentNode.insertBefore(newFields, elementToCopy.nextSibling);
}