如何用jQuery将JSON数据正确追加到现有HTML列表的对应<li>元素？

看起来你遇到的核心问题是两种错误的实现：要么创建全新列表导致DOM冗余，要么追加时把所有数据重复添加到每个现有<li>里。我来帮你梳理正确的实现方式，分两种常见需求场景：

场景1：给每个现有<li>追加对应的JSON值 #

如果你的需求是把test.json里的每个值分别对应到现有3个<li>中（比如val1对应第一个<li>，val2对应第二个，以此类推），可以这样写：

$.getJSON("test.json", function(data) {
  // 将JSON对象转换为有序的键值对数组
  const dataEntries = Object.entries(data);
  
  // 遍历每个现有<li>，匹配对应索引的JSON数据
  $('#menu li.test').each(function(index) {
    // 确保索引对应的数据存在
    if (dataEntries[index]) {
      const [key, val] = dataEntries[index];
      // 给当前<li>追加内容，不会影响其他<li>
      $(this).append(`<p>${val}</p>`);
    }
  });
});

为什么之前的代码出错？ #

你第二段代码里，每次循环都用appendTo('ul#menu li')，这个选择器会匹配所有现有<li>，所以每遍历一个JSON项，就会给每个<li>都加一遍内容，最终每个<li>里都有所有JSON值的<p>标签。上面的代码通过each遍历单个<li>，只给当前<li>追加对应的数据，就解决了重复添加的问题。

场景2：把JSON数据作为新<li>追加到现有列表末尾 #

如果你的需求是在现有<ul id="menu">后面添加新的<li>（而不是修改现有<li>），可以这样写：

$.getJSON("test.json", function(data) {
  const newItems = [];
  
  // 遍历JSON生成新的<li>字符串
  $.each(data, function(key, val) {
    newItems.push(`<li class="test" id="${key}"><a href="#">${key}</a><p>${val}</p></li>`);
  });
  
  // 把所有新<li>一次性追加到现有<ul>末尾
  $('#menu').append(newItems.join(''));
});

为什么之前的创建列表代码有问题？ #

你第一段代码是创建了一个全新的<ul>并添加到main#wrapper里，导致页面上有两个并列的列表。上面的代码直接把新<li>追加到已有的<ul id="menu">中，避免了多余的DOM嵌套。

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