Hinzufügen von Optionen zu einem Datenlistener über Array in DOMS und Javascript

Question

Ich versuche, einen Suchdatalist mit DOMs zu erstellen und den Datenlistener mit Optionen von allCardsArray zu füllen. Ich weiß, dass der Option.value funktioniert, aber keine der Optionen wird an die Datenliste angefügt. Unten ist der einfache Tisch, den ich versuche zu machen. Ich schätze die Hilfe.

function generate_topnav(lowerCaseHeroName, allCardsArray){ 
    var body = document.getElementsByTagName("body")[0]; 
    var tbl = document.createElement("table"); 
    var tblBody = document.createElement("tbody"); 
    var row = document.createElement("tr"); 
    var cell1 = document.createElement("td"); 
    var database = document.createTextNode("OverRealm Card Database") 
    database.id = 'database'; 
    cell1.appendChild(database); 
    row.appendChild(cell1); 
    var cell2 = document.createElement('td'); 
    var input = document.createElement('input'); 
    input.style.fontSize = '18pt'; 
    input.style.height = '56pt'; 
    input.style.width = '300px'; 
    input.setAttribute('placeholder', ' Search for a card...'); 
    input.setAttribute = ('type', 'text'); 
    input.id = 'minionSearch'; 
    input.setAttribute = ('list', 'cardSearch'); 
    input.onchange = function() { 
     redirect(value); 
    }; 
    cell2.appendChild(input); 
    var datalist = document.createElement('datalist'); 
    datalist.id = 'cardSearch'; 
    //THIS IS WHERE I'M TRYING TO POPULATE OPTIONS IN DATALIST 
    allCardsArray.forEach(function(item){ 
     var option = document.createElement('option'); 
     option.value = item; 
     datalist.appendChild(option); 
    }); 
    input.appendChild(datalist); 
    row.appendChild(cell2); 
    tblBody.appendChild(row); 
    tbl.appendChild(tblBody); 
    body.appendChild(tbl);} 

Ich habe ursprünglich diese in HTML und es funktionierte, und es sah wie folgt aus:

<input style="font-size:18pt; height:56px; width:300px;" type="text" id="minionSearch" list="cardSearch" placeholder=" Search for a card..." onchange="javascript:redirect(value)"> 
     <datalist id="cardSearch"></datalist> 
      <script> 
       var list = document.getElementByID("cardSearch"); 
       allCardsArray.forEach(function(item){ 
        var option = document.createElement('option'); 
        option.value = item; 
        list.appendChild(option); 
       }); 
      </script> 

Ich bin neugierig, warum ist meine DOMs Version nicht funktioniert.

Answer 1

input.setAttribute = ('type', 'text'); sollte input.setAttribute('type', 'text'); und input.setAttribute = ('list', 'cardSearch'); sollte <datalist> Element sein input.setAttribute('list', 'cardSearch');

Die <option> Elemente angehängt werden. Das Problem besteht darin, dass JavaScript bei der Frage .textContent des erstellten Elements <option> nicht festgelegt ist.