如何创建许多元素并将它们添加到另一个许多元素？答案

【问题标题】：How to create many elements and add them to another many elements?如何创建许多元素并将它们添加到另一个许多元素？
【发布时间】：2020-03-25 18:55:36
【问题描述】：

您好，我在创建许多元素并向其中添加许多元素然后将它们附加到另一个元素时遇到问题。

我的代码如下所示：

    const createElementsFromLocalStorage = (event) => {
        for (let i = 0; i < allRecipes.length; i++) {
            let optionValue = document.createElement('option');
            optionValue.value = allRecipes[i].title;

            for(let j = 0; j < allDaysDataLists; j++) {
                allDaysDatalists[j].appendChild(optionValue);
            }
        }
    }

所以我想创建 optionValue "i" 次，并为每个 allRecipes.title 设置它们的值。例如，它应该如下所示：

我有数组 allRecipes = [1, 2, 3, 4, 5] 所以我想创建 5 次 optionValue 并且每个 optionValue 应该有 .value 取决于数组索引。例如：optionValue.value = 1，optionValue.value = 2，optionValue.value = 3，optionValue.value = 4，optionValue.value = 5。然后我想将所有这些 optionValue 元素附加到每个 allDaysDataLists。所以每个 allDaysDataLists 都应该有所有这个创建的 optionValue。

【问题讨论】：

标签： javascript html for-loop dom appendchild

【解决方案1】：

for(let i = 0; i < allDaysDataLists.length; i++) {
     for(let j = 0; j < allRecipes.length; j++) {
         const optionValue = document.createElement('option');
         optionValue.value = allRecipes[j].title;
         allDaysDatalists[i].appendChild(optionValue);
     } 
}

【讨论】：

【解决方案2】：

你可以试试这个吗？

    const createElementsFromLocalStorage = (event) => {
       allRecipes.forEach(r => {
           allDaysDatalists.forEach(select => {
              select.options[select.options.length] = new Option(r.title, r.title);
           });
       });
    }

【讨论】：