Getting the children of a childnode

Question

So I am cloning this div and getting all of the children within it. But inside of it is a list and in the list are the inputs. The children of the divs come up as the li's. Is there a way to dig deeper and get the children of the li's while still cloning the div as a whole. The rest of the form is in a ul so I need to clone it as a whole to keep the formatting. The div im cloning is a template ive made.

The div:

<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>

And the script:

<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>

Answer 1

Have you considered using recursion? For example in your code I'm guessing this is the bit you want performing on all child nodes:

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;
}

Will go through the children of newFields... the recursive function could be something like this:

    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);
        }
    }

This means your original function could be something like:

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);
}

I can't guarantee that the above will parse as I'm not currently on my development machine, but you should get the gist of what I mean hopefully.

Answer 2

This should help you:

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]);
}