JavaScript如何创建car对象并将各属性通过<li>标签以列表形式渲染到页面

现有逻辑问题修正 #

你原有JS逻辑里重复创建了新的ul元素追加到body，和HTML里预留的id为carr的空ul冲突，会导致预留容器为空、页面多出冗余列表，直接复用已有容器即可。

完整实现代码 #

HTML结构 #

直接使用你预留的容器即可，不需要额外调整：

<body>
  <div>
    <!-- 预留的列表容器 -->
    <ul id="carr"></ul>
  </div>
  <!-- 引入JS脚本建议放在body末尾，保证DOM加载完成再执行逻辑 -->
  <script src="./index.js"></script>
</body>

JS逻辑代码 #

// 定义包含三个属性的car对象
const car = {
  name: "比亚迪汉EV",
  type: "中大型纯电动轿车",
  price: "21.58万起"
};
// 存储需要展示的属性名，可自定义展示顺序
const propertyName = ["name", "type", "price"];
// 获取页面已经存在的ul容器，不需要重复创建ul
const listContainer = document.getElementById("carr");

// 遍历属性数组生成对应列表项
for (const prop of propertyName) {
  // 创建li元素
  const listItem = document.createElement("li");
  // 拼接属性名和属性值，赋值给li内容
  listItem.innerHTML = `${prop}：${car[prop]}`;
  // 将li追加到ul容器中
  listContainer.appendChild(listItem);
}

可选实现方式 #

如果你不需要固定属性的展示顺序，也可以不用提前声明propertyName数组，直接用for...in遍历对象自身属性即可：

for (const key in car) {
  // 过滤原型链上的冗余属性，只保留对象自身定义的属性
  if (Object.prototype.hasOwnProperty.call(car, key)) {
    const listItem = document.createElement("li");
    listItem.innerHTML = `${key}：${car[key]}`;
    listContainer.appendChild(listItem);
  }
}

注意事项 #

• 取对象动态属性值的时候必须用对象[变量名]的方括号语法，不能写对象.key，后者会固定查找名为key的属性，拿到的结果是undefined
• 如果JS脚本写在head标签里，需要把DOM操作逻辑放在DOMContentLoaded事件回调里，否则会因为DOM还没加载完成，拿不到id为carr的ul元素报错

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