javascript - Getting the children of a childnode -

so cloning div , getting of children within it. inside of list , in list inputs. children of divs come li's. there way dig deeper , children of li's while still cloning div whole. rest of form in ul need clone whole keep formatting. div im cloning 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 united states</label>             <p class="guidelines" id="guide_4_1"><small>please include country code if outside 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 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 script:

<script>  var counter = 1;  function morefields() {     counter++;     var newfields = document.getelementbyid('add_contact').clonenode(true);      newfields.id = '';     (var index = 0; index < newfields.length; index++) {         console.log(newfield[i]);     }     newfields.style.display = 'block';     var newfield = newfields.children;        (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> 

this should you:

counter++; var newfields = document.getelementbyid('add_contact').clonenode(true); var newinputs = newfields.getelementsbytagname('input');  newfields.id = ''; (var index = 0; index < newinputs.length; index++) {     console.log(newinputs[i]); }