jQuery调用.html()方法设置内容后返回undefined的问题

• 核心原因是执行代码时，$("li")没有匹配到任何页面上已存在的<li>元素。当jQuery选择器返回空对象时，调用.html()读取内容就会返回undefined。
• 常见误区：$("li")的作用是查找页面已有的li元素，不是新建li。如果你本来的需求是创建一个新的商品li节点，当前选择器写法本身就是错的。
• 补充规则：如果选择器匹配到多个li元素，.html()取值时只会返回第一个匹配元素的内部HTML，给所有匹配li设置内容时传入回调函数的写法是符合API规范的，本身没有语法错误。

场景1：修改页面上已经存在的li内容 #

确保代码在DOM加载完成后执行，避免找不到元素：

// DOM加载完成后再执行逻辑
$(function () {
  const nombre = "测试商品"; // 提前定义用到的nombre变量，避免变量未定义报错
  let nuevo_producto = $("li").html(() => {
    return "<input class='marcar-comprado' type='checkbox'/><span class='producto'>" + nombre + "</span><img class='icono-borrar' src='img/delete-icon.png' alt='Borrar'>"
  });
  console.log(nuevo_producto.html()); // 此时可以正常读取第一个li的内容
})

场景2：新建一个li元素后插入页面 #

创建新元素需要把完整标签传入jQuery构造函数，而不是写标签选择器：

const nombre = "测试商品";
// 新建独立的li元素，设置内部内容
let nuevo_producto = $("<li>").html(() => {
  return "<input class='marcar-comprado' type='checkbox'/><span class='producto'>" + nombre + "</span><img class='icono-borrar' src='img/delete-icon.png' alt='Borrar'>"
});
console.log(nuevo_producto.html()); // 无需插入页面也能正常读取设置的内容
// 后续可以把新建的li插入到页面的列表容器中，比如：
// $("ul.compras-lista").append(nuevo_producto);

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