JavaScript appendChild（）无法正常工作？ （第一次使用appendChild（））

Question

我正在尝试构建一个小的履历生成器。 我希望用户能够输入任意数量的电话号码。 但是，appendChild（）不能按预期方式工作。 实际上，它根本不起作用。 它什么也没做。 有任何想法吗？

HTML：

<div id="phoneNumbers">
    <?php 
    if(isset($_SESSION['phoneNumber'])){
        for($i = 0; $i<sizeof($_SESSION['phoneNumber']); $i++){
            echo "<input type=\"text\" size=\"20\" name = \"phoneNumber[".$i."]\" 
                    value=\"".$_SESSION['phoneNumber'][$i]."\" />
                  <br />"; 
        }

    }
    else{
    ?>

    <input type="text" size="20" name = "phoneNumber[0]" 
        value="" />
    <br /> 

    <?php   
    }
    ?>

</div>


<input type="button" value="Add another phone number" onclick="addPhoneNumber()">

Javascript：

var numberOfPhoneInputs = 1;

function addPhoneNumber()
{

// Found out the following doesn't work as expected...
//  var newPhoneNumberInput =  "<input type=\"text\" size=\"20\" name = \"phoneNumber[" + 
//      numberOfPhoneInputs +"]\" value=\"\" />" +
//    "<br />" 
//  document.getElementById("phoneNumbers").innerHTML += newPhoneNumberInput;


    var div = document.getElementByID("phoneNumbers");

    var newPhoneNumberInput = document.createElement('input');
    newPhoneNumberInput.setAttribute('type', 'text');
    newPhoneNumberInput.setAttribute('name', 'phoneNumber['+numberOfPhoneInputs+']');
    newPhoneNumberInput.setAttribute('size', '20');
    newPhoneNumberInput.setAttribute('value', '');
    div.appendChild(newPhoneNumberInput);


    numberOfPhoneInputs ++;
}

Answer 1

您需要return false; 从点击处理程序中删除，以防止按钮的默认操作提交页面。

Answer 2

document.getElementByID必须为document.getElementById

该错误应显示在您的控制台中。

Answer 3

您需要进行这些更改...

1. 更改document.getElementByID("phoneNumbers"); 到document.getElementById("phoneNumbers");

2. （可选）如果将var div更改为var phoneNumbersDiv或其他内容，那会很好

小提琴示例： http : //jsfiddle.net/v8rF3/

更新的代码：

var numberOfPhoneInputs = 1;

function addPhoneNumber(){
    var div1 = document.getElementById("phoneNumbers");
    var newPhoneNumberInput = document.createElement('input');
    newPhoneNumberInput.setAttribute('type', 'text');           newPhoneNumberInput.setAttribute('name', 'phoneNumber['+numberOfPhoneInputs+']');
    newPhoneNumberInput.setAttribute('size', '20');
    newPhoneNumberInput.setAttribute('value', '');
    div1.appendChild(newPhoneNumberInput);

    numberOfPhoneInputs ++;
}