<div class="yxtx"> <div class="rw"> <div class="rwzp"> < img src="img/20.jpg" alt=""> </div> <div class="rwmc"> <div class="m1"> 蒸汽机器人 </div> <div class="m2"> 布里茨 </div> </div> </div> </div>css代码.yxtx{ width: 875px; background-color: #11141b; float: left; margin-left: 30px; padding: 10px 10px; } .rw{ width: 105px; text-align: center; color: #ff9100; float: left; font-size: 12px; margin-right: 20px; } .rwzp{ border: 2px solid #484d53; width: 105px; height: 105px; }用js循环遍历数组的方法生成.rw

假设我们有一个数组 `robots`，其中包含多个机器人的信息，我们可以使用以下代码循环遍历数组并生成对应的HTML元素：

// 获取包含机器人列表的 HTML 元素
const container = document.querySelector('.yxtx');

// 循环遍历 robots 数组
for (let i = 0; i < robots.length; i++) {
  // 创建包含机器人信息的 HTML 元素
  const robotElement = document.createElement('div');
  robotElement.classList.add('rw');
  
  const imageElement = document.createElement('div');
  imageElement.classList.add('rwzp');
  
  const img = document.createElement('img');
  img.src = robots[i].image;
  img.alt = robots[i].name;
  
  imageElement.appendChild(img);
  
  const nameElement = document.createElement('div');
  nameElement.classList.add('rwmc');
  
  const m1 = document.createElement('div');
  m1.classList.add('m1');
  m1.textContent = robots[i].type;
  
  const m2 = document.createElement('div');
  m2.classList.add('m2');
  m2.textContent = robots[i].name;
  
  nameElement.appendChild(m1);
  nameElement.appendChild(m2);
  
  robotElement.appendChild(imageElement);
  robotElement.appendChild(nameElement);
  
  // 将机器人信息添加到容器元素中
  container.appendChild(robotElement);
}

在这个代码中，我们假设机器人的信息包含在一个名为 `robots` 的数组中，每个机器人的信息包括类型、名称和图片地址。我们首先获取包含机器人列表的 HTML 元素，并循环遍历 `robots` 数组。在循环中，我们创建包含机器人信息的 HTML 元素，并将它们添加到容器元素中。这样，每个机器人的信息就被生成为一个名为 `rw` 的 HTML 元素。