通過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和它的工作，它看起來像這樣：

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

我很好奇，爲什麼我的DOM的版本不工作。

Answer 1

input.setAttribute = ('type', 'text');應input.setAttribute('type', 'text');和input.setAttribute = ('list', 'cardSearch');應input.setAttribute('list', 'cardSearch');

的<option>元件被附加到<datalist>元件。問題在於，問題中的JavaScript沒有設置創建<option>元素的.textContent。