Почему здесь не работает document.getElementById?

Question

Я работаю с моим первым чистым приложением JavaScript, и мне трудно понять, почему мой document.getElementById в последнем блоке приведенного ниже кода не работает. Я начинаю свой сценарий с document.addEventListener('DOMContentLoaded', function() {first functions called}, и элементы загружаются в DOM без каких-либо проблем.

Проблема заключается в том, что мой код прыгает на последний блок (начало var x), прежде чем элементы будут добавлены на мою страницу? Если да, есть ли способ сказать код отвиснуть? В конце концов я хочу позвонить document.getElementById в более позднюю функцию (для изменения DOM).

function populateRefineMenu(arr, chosenArr, category) { 
    var categoryUL = document.createElement('ul'); 
    categoryUL.className = 'refine-menu-ul'; 
    categoryUL.Id = 'refine-' + category; 

    var clearFilter = document.createElement('li'); 
    clearFilter.className = 'clear-filter'; 
    clearFilter.Id = 'genre-clear-filter'; 
    console.log('This ID is ' + clearFilter.Id); // logs fine 
    clearFilter.innerHTML = 'Clear Filter'; 
    console.log("clearFilter is " + clearFilter.innerHTML); // logs fine 

    refineMenu.appendChild(categoryUL); 
    categoryUL.appendChild(clearFilter); 

    var x = document.getElementById('genre-clear-filter'); 
    console.log(x) // logs "null" 
    console.log(x.innerHTML) // "cannot read property 'innerHTML' 
} 

Спасибо за ваш совет!

Answer 1

Помимо ваших опечаток, ваша проблема заключается в том, что вы не добавляете созданный ul в DOM. Перед созданием x, добавьте эту строку в код

document.body.appendChild(categoryUL); 

Потому что, в противном случае li#genre-clear-filter не будет присутствовать в объектной модели документа (DOM) и так, document.getElementById не может принести его.

P.S: Если вы планируете создать более одного li, используя петлю, убедитесь, что вы даете разные идентификаторы для каждого li. id должен быть уникальным в DOM согласно спецификации.

P.P.S: Другие проблемы, связанные с вашим кодом являются

1. Id должен быть изменен на id позвонить по document.getElementById
2. refineMenu неопределен