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

document.getElementByID должен быть document.getElementById

Эта ошибка должна отображаться в консоли.

Answer 2

Вы должны return false; из обработчика щелчка, чтобы предотвратить действие по умолчанию баттона подачи страницы.

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