DOMSとJavascriptで配列を使用してデータリストにオプションを追加する

Question

DOMを使用して検索データリストを作成し、データリストにallCardsArrayのオプションを設定しようとしています。 option.valueは動作していますが、オプションのどれもデータリストに追加されていません。以下は私が作ろうとしているシンプルなテーブルです。私は助けに感謝します。

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

私はもともとHTMLにこれをしなかったし、それが働いていたし、それがこのように見えた：私は私のDOMのバージョンが動作していない理由として興味

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

。 input.setAttribute('list', 'cardSearch');

<option>要素は<datalist>要素に付加されていなければならない

Answer 1

input.setAttribute = ('type', 'text');はinput.setAttribute('type', 'text');とinput.setAttribute = ('list', 'cardSearch');であるべきです。問題は、質問のJavaScriptが<option>要素の.textContentを設定していないことです。