getElementById возвращает null при присвоении переменной

Question

getElementById возвращает null при присвоении переменной.

var element = document.getElementById("ul1"); 
var newelement = document.createElement("li"); 
newelement.innerHTML = "New"; 
element.appendChild(newelement); 

Answer 1

Когда вы кладете JavaScript в head документе будет загружать (и блокировать загрузку body) перед любым другим элементом на странице.

Быстрый пример того, что вы на самом деле делание бы это:

<!-- script runs before element creation --> 
<script type="text/javascript"> 
    var element = document.getElementById('ul1'); 
</script> 
<!-- this is after execution, where JS could not find the element but only now is the element actually created --> 
<ul id="ul1"></ul> 

Чтобы решить эту проблему, вы можете сделать несколько вещей

• Поместите <script> тег ниже элемент, на который вы хотите нацелиться
• место <script> бирка чуть выше закрытия </body> тег)
• используйте window.onload = function() { ... }, чтобы убедиться, что страница загружена, прежде чем что-либо делать.

Тогда ul элемент будет существовать, и вы будете иметь возможность добавить свой LI :)