如何用JavaScript创建独立列表项？代码问题排查

我想为每个变量创建一个新的<li>元素，但运行后所有变量内容都被合并到同一个<li>中。

以下是我的JavaScript代码：

var ul = document.getElementById("results");
const li = document.createElement("li");
let vin = "VIN: " + result['vin'];
let country = "Country: " + result["country"];
let manuf = "Manufacturer: " + result["manufacturer"];
let region = "Region: " + result["region"];
let years = "Years: " + result["years"];

li.append(document.createTextNode(vin));
ul.append(li)
li.append(document.createTextNode(country));
ul.append(li)
li.append(document.createTextNode(manuf));
ul.append(li)
li.append(document.createTextNode(region));
ul.append(li)
li.append(document.createTextNode(years));
ul.append(li)

实际输出：

VIN: 4F2YU09161KM33122Country: United StatesManufacturer: MazdaRegion: North AmericaYears: 2001

期望输出：

<ul>
<li>VIN: 4F2YU09161KM33122</li>
<li>Country: United States</li>
<li>Manufacturer: Mazda</li>
<li>Region: North America</li>
<li>Years: 2001</li>
</ul>

解决方案 #

核心问题是你只创建了一个<li>元素：

• 每次调用ul.append(li)时，并不会复制这个<li>添加到列表，而是把同一个<li>在DOM树里移动（同一个DOM元素无法同时存在于多个位置）。
• 同时你反复给这个唯一的<li>追加文本内容，最终所有字段都堆在了这一个<li>里。

写法一：逐个创建独立<li> #

直接为每个字段生成单独的<li>元素：

var ul = document.getElementById("results");

// VIN字段
let vinLi = document.createElement("li");
vinLi.textContent = "VIN: " + result['vin'];
ul.append(vinLi);

// Country字段
let countryLi = document.createElement("li");
countryLi.textContent = "Country: " + result["country"];
ul.append(countryLi);

// Manufacturer字段
let manufLi = document.createElement("li");
manufLi.textContent = "Manufacturer: " + result["manufacturer"];
ul.append(manufLi);

// Region字段
let regionLi = document.createElement("li");
regionLi.textContent = "Region: " + result["region"];
ul.append(regionLi);

// Years字段
let yearsLi = document.createElement("li");
yearsLi.textContent = "Years: " + result["years"];
ul.append(yearsLi);

写法二：用循环优化（更易维护） #

把字段信息整理成数组，通过循环批量创建<li>，适合字段较多的场景：

var ul = document.getElementById("results");

// 定义字段标签与对应数据key的映射
const fieldMap = [
  { label: "VIN", key: "vin" },
  { label: "Country", key: "country" },
  { label: "Manufacturer", key: "manufacturer" },
  { label: "Region", key: "region" },
  { label: "Years", key: "years" }
];

// 循环生成每个li并添加到列表
fieldMap.forEach(item => {
  const li = document.createElement("li");
  li.textContent = `${item.label}: ${result[item.key]}`;
  ul.append(li);
});

两种写法都能生成你期望的HTML结构，循环写法后续新增字段时，只需在fieldMap数组中添加对应项即可，无需重复编写创建元素的代码。

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