Question

我有一个简单的forEach循环，我试图将列表项追加到无序列表中。但是，当我运行脚本时，我只看到一个列表项被添加。任何人都可以解释为什么会这样吗？

JS

let bookElement = document.getElementsByClassName("book");
let navElement = document.getElementsByTagName("nav")[0];
let unorderedList = document.createElement("UL");
let listItems = document.createElement("LI");
let book1 = new Book();
let book2 = new Book();
let booksArray = [book1, book2];

createNavigation(booksArray, navElement, unorderedList, listItems);

function createNavigation(booksArray, navElement, unorderedList, listItems){
    console.log(booksArray)
    booksArray.forEach(function(book){
        unorderedList.appendChild(listItems);
    })
    navElement.appendChild(unorderedList);
}

HTML

<body>
    <nav></nav>
    <div class="book"></div>
</body>

函数中的日志返回数组中有两个对象。

Answer 1

您只创建一个列表项。

然后将其附加到多个位置。

由于元素不能同时存在于多个位置，因此每次附加元素（在第一个元素之后）时，移动它。

在循环中使用let listItems = document.createElement("LI");。

Answer 2

是的，数组中有两个对象，但您要将相同的元素添加到无组织列表两次。因此，第二次添加时，浏览器会看到该元素已存在，并且不会再次添加。

更好的方法是在循环的每次迭代中简单地创建一个新的li元素：

function createNavigation(booksArray, navElement, unorderedList){
    console.log(booksArray)
    booksArray.forEach(function(book){
        let listItems = document.createElement("LI");
        unorderedList.appendChild(listItems);
    })
    navElement.appendChild(unorderedList);
}

请注意，我已删除listItems参数，因为传入其中的值现在未使用。

现在，您可以通过以下方式做一些事情，使您的计划更进一步：

function createNavigation(booksArray, navElement, unorderedList){
    console.log(booksArray)
    booksArray.forEach(function(book){
        let listItems = document.createElement("LI");
        listItems.innerHTML = book.title;
        unorderedList.appendChild(listItems);
    })
    navElement.appendChild(unorderedList);
}

这将创建一个书名列表，假设您的标题存储在title构造函数的Book属性中。

为什么在forEach循环中列出项目不会附加？

2 个答案: