javascript - 初学者子节点在克隆后被返回为未定义，所以我无法设置它们的属性

Question

我不确定为什么我不能更改子节点的属性。它们似乎以未定义的形式返回。我不确定是不是因为它们在列表中。经过一些测试，我发现当我将节点放在列表中时，事情开始变得很糟糕，之后我无法设置任何属性

<div id="add_contact" >

    <li id="li_3" >



    <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 id="li_27" >
    <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=""/> 
        <!--<label for="element_15">Seperate Multiple Emails With A Space</label>-->
    </div>
    <!--<p class="guidelines" id="guide_15"><small>Quality Control Contact</small></p> 
    p class="guidelines" id="guide_15"><small>Seperate Multiple Emails With A Space</small></p>-->
    </li>


    <li id="li_4" >
    <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 id="li_13" >
    <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 id="li_6" >
    <label class="description" for="element_6">Type Of Contact (Select all that apply) </label>

    <div>


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



        <!--<label for="element_6">Seperate Multiple Emails With A Space</label>-->
    </div>

    <!--<p class="guidelines" id="guide_6"><small>Seperate Multiple Emails With A Space</small></p> -->

    </li>   



</div>  

我的脚本：

var counter = 1;

function moreFields() {
    counter++;
    var newFields = document.getElementById('add_contact').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var index = 0; index < newField.length; index++) {
        document.write(newField[i]);
    }
    for (var i = 0; i < newField.length; i++) {
        var theName = newField[i].name
        if (theName) newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById('add_contact');
    insertHere.parentNode.insertBefore(newFields, insertHere);
}

我创建了一个没有列表的模板，一切正常，但为了使用表单的其余部分设置它的样式，我需要在列表中使用它：

<div id="add_contact" style="display:none" >

<label class="description" for="element_3"><h2>Contact</h2> </label>    
<input id="element_3_1" name= "acct_first" onchange="contacts();" value=" " class="element text" maxlength="255" size="20" value=""/>
<input id="element_3_2" name= "acct_last" onchange="contacts();" class="element text" maxlength="255" size="20" value=""/>  


<input id="element_27" name="acct_cont" onchange="contacts();" class="element text large" type="text" maxlength="200" value=""/> 
<input id="element_4_1" name="acct_phone" onchange="contacts();" class="element text" size="20" maxlength="20" value="" type="text"> 
<input id="element_13_1" name="acct_fax" onchange="contacts();" class="element text" size="20" maxlength="20" value="" type="text"> 



<input type="checkbox" name="contact" value="">Quality Control


<input type="checkbox" name="contact" value="">Accounts Payable

<input type="checkbox" name="contact" value="">Purchasing


</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.childNodes;



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

}


</script>

Answer 1

var newInputs = newFields.getElementsByTagName('input');

允许我到达正确的节点