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

Question

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

我的代码如下所示：

    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。然后我想追加所有这些每个 allDaysDataLists 的 optionValue 元素。所以每个 allDaysDataLists 都应该有所有这些创建的选项值。

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

Answer 2

你能试试这个吗？

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

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

How to create many elements and add them to another many elements?

html

javascript

dom

for-loop

appendchild