Ajout d'options à un datalist via un tableau dans DOMS et Javascript

Question

J'essaie de créer un datalist de recherche avec DOMs, et de remplir le datalist avec les options de allCardsArray. Je sais que l'option.value fonctionne, mais aucune des options n'est ajoutée au datalist. Voici le tableau simple que j'essaie de faire. J'apprécie l'aide.

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

j'ai fait à l'origine cela en HTML et cela a fonctionné et il ressemblait à ceci:

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

Je suis curieux de savoir pourquoi ma version ne fonctionne pas Doms.

Answer 1

input.setAttribute = ('type', 'text'); devrait être input.setAttribute('type', 'text'); et input.setAttribute = ('list', 'cardSearch'); devrait être input.setAttribute('list', 'cardSearch');

Les <option> éléments sont ajoutés à l'élément <datalist>. Le problème est que JavaScript à Question ne définit pas .textContent de l'élément <option> créé.