我在访问数组、遍历数组然后将数组中的元素打印到DOM时遇到了问题.由于某些原因,它只是打印"趣味",而不打印数组中的另外两个元素"Ketchup"和"Mustard".如何完成这项任务有什么我可以得到的提示吗?

以下是我的代码如下.

let topingsCount;
const burger = document.createElement('div');
const topingsDiv = document.createElement('div');
const condiments = ['Ketchup', 'Mustard', 'Relish']
const condimentsNewDiv = document.createElement('div');

function createBuger(condiments){
    burger.className = 'burger';
    burger.appendChild(topingsDiv)
    topingsDiv.className = "topings";
    condimentsNewDiv.className = "condiments";
    topingsDiv.appendChild(condimentsNewDiv)
    for(let topingsCount = 0; topingsCount != condiments.length ; topingsCount++){
        topingsDiv.appendChild(condimentsNewDiv).textContent = condiments[topingsCount];
        console.log(condimentsNewDiv);
    }

    console.log(burger);
    document.body.appendChild(burger)


}
createBuger(condiments);

我try 了在for循环中使用console.log(CondimentsNewDiv);这样,我就可以打印出每种调味品.但它只打印了<div class="condiments">Relish</div>次3次.我原以为它会打印出来:

<div class="condiments">Ketchup</div>
<div class="condiments">Mustard</div>
<div class="condiments">Relish</div>

推荐答案

看起来您每次都在使用调味品NewDiv,而不是 for each 调味品创建一个新的div.这将为每种调味品重复使用相同的元素引用,这意味着它很可能每次都会覆盖extContent.

试着做一些这样的事情:

let topingsCount;
const burger = document.createElement('div');
const topingsDiv = document.createElement('div');
const condiments = ['Ketchup', 'Mustard', 'Relish']

function createBuger(condimentsList){
    burger.className = 'burger';
    topingsDiv.className = "topings";
    for(let topingsCount = 0; topingsCount != condimentsList.length ; topingsCount++){
        const condimentsNewDiv = document.createElement('div');
        condimentsNewDiv.className = "condiments";
        topingsDiv.appendChild(condimentsNewDiv).textContent = condimentsList[topingsCount];
        console.log(condimentsNewDiv);
    }

     burger.appendChild(topingsDiv)

    console.log(burger);
    document.body.appendChild(burger)


}
createBuger(condiments);

请注意,我们在为每种调味品创建一个新的div,而不是反复使用同一个div.

Javascript相关问答推荐

JavaScript代理不适用于打开的窗口对象

d3可排序表标题行中有收件箱--如何使收件箱不触发排序?

Toast函数找不到其dis

React存档iframe点击行为

如何在使用fast-xml-parser构建ML时包括属性值?

Google Apps脚本中的discord邀请API响应的日期解析问题

我开始使用/url?q=使用Cheerio

JQuery. show()工作,但. hide()不工作

Chrome是否忽略WebAuthentication userVerification设置?""

在react JS中映射数组对象的嵌套数据

用于编辑CSS样式的Java脚本

无法读取未定义错误的属性路径名''

我怎么在JS里连续加2个骰子的和呢?

如何在ASP.NET项目中使用Google Chart API JavaScript将二次轴线值格式化为百分比

在Matter.js中添加从点A到另一个约束的约束

查询参数未在我的Next.js应用路由接口中定义

NG/Express API路由处理程序停止工作

根据一个条件,如何从处理过的数组中移除一项并将其移动到另一个数组?

Cherrio JS返回父div的所有图像SRC

Socket.IO在刷新页面时执行函数两次