javascript - 通过 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 没有设置 .textContent创建的 <option>元素。