如何从JS数组向对应OL列表正确插入新LI元素？

核心问题 #

1. HTML中ID重复：id="hhh"和id="name"在文档中重复出现，ID是全局唯一标识，重复会导致DOM选择器无法正确定位目标元素。
2. JS中错误的插入目标：代码最后用document.getElementById("hhh")只会获取第一个匹配的<ol>，所以所有新元素都被插入到第一个列表中，而非当前循环对应的列表。

修正步骤 #

1. 修正HTML结构（解决ID重复问题）

将重复的ID改为类名，确保DOM结构符合规范：

<ol class="specs">
  <li class="name">apartment</li>
</ol>

<ol class="specs">
  <li class="name">house</li>
</ol>

2. 修正JS代码（插入到对应列表）

• 用当前循环的ol变量作为插入目标，而非全局获取的第一个元素
• 简化匹配数据的逻辑，使用数组find方法更高效
• 修正选择器，从ID选择器改为类选择器

const types = [{
    name: "house",
    sq: 250,
    year: 2020
  },
  {
    name: "apartment",
    sq: 70,
    year: 2010
  },
];

document.querySelectorAll('.specs').forEach(ol => {
  // 获取当前ol下的名称文本，改用类选择器
  const name = ol.querySelector(".name").textContent.trim();
  // 从types数组中匹配对应项
  const matchedItem = types.find(item => item.name === name);
  
  if (matchedItem) { // 确保找到匹配项再创建元素
    const li = document.createElement("LI");
    li.textContent = matchedItem.sq;
    // 插入到当前循环的ol中，而非全局第一个ol
    ol.appendChild(li);
  }
});

额外优化说明 #

• 加入trim()处理文本，避免因空格导致匹配失败
• 增加if (matchedItem)判断，防止找不到匹配项时出现报错
• 使用textContent直接设置文本，比createTextNode更简洁

内容的提问来源于stack exchange，提问作者Alex March