Warum funktioniert document.getElementById hier nicht?

Question

Ich arbeite mit meiner ersten reinen JavaScript-App und habe Probleme herauszufinden, warum meine document.getElementById im letzten Block des unten stehenden Codes nicht funktioniert. Ich beginne mein Skript mit document.addEventListener('DOMContentLoaded', function() {first functions called} und die Elemente werden problemlos auf das DOM geladen.

Ist das Problem, dass mein Code auf den letzten Block (beginnend var x) springt, bevor die Elemente zu meiner Seite hinzugefügt werden? Wenn ja, gibt es eine Möglichkeit, dem Code mitzuteilen, dass er zurückbleiben soll? Schließlich möchte ich document.getElementById in einer späteren Funktion aufrufen (um das DOM zu ändern).

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' 
} 

Vielen Dank für Ihren Hinweis!

Answer 1

Abgesehen von Ihren Tippfehlern besteht Ihr Problem darin, dass Sie das erstellte ul nicht zu DOM hinzufügen. Vor x Erstellen, fügen Sie diese Zeile Code

document.body.appendChild(categoryUL); 

Denn sonst li#genre-clear-filter nicht in Document Object Model vorhanden sein (DOM) und so, document.getElementById kann es nicht holen.

S.: Wenn Sie mehr als eine li mit einer Schleife erstellen möchten, stellen Sie sicher, dass Sie jedem li unterschiedliche IDs geben. id muss gemäß Spezifikation in DOM eindeutig sein.

P.P.S: Die anderen Probleme mit Ihrem Code sind

1. Id zu id geändert werden sollte, rufen durch document.getElementById
2. refineMenu