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