通过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。