动态创建div后插入HTML代码，span内容无法显示的问题

问题核心 #

当前代码能成功创建空的div和span，但无法将数据库返回的名称列表填充到每个新span中；使用jQuery load 时仅第一个div生效，后续元素无内容。

关键问题分析 #

1. 原生JS代码存在样式属性拼写错误：boxsizing 应为驼峰写法 boxSizing（虽不是内容不显示的直接原因，但会导致样式异常）。
2. 未将数据库获取的名称列表主动填充到新创建的span中，仅插入了空span标签。
3. 使用load时未针对每个新创建的div单独发起请求，或请求被浏览器缓存导致后续无更新。

解决方案1：原生JS异步填充数据 #

先通过异步请求获取数据库名称列表，再将数据填充到新创建的span中：

// 封装获取数据库名称列表的异步函数
async function fetchNameList() {
  try {
    const response = await fetch('your-data-api.php'); // 替换为你的数据接口地址
    return await response.json(); // 假设接口返回格式为数组：["名称1", "名称2", ...]
  } catch (err) {
    console.error('获取数据失败:', err);
    return [];
  }
}

// 改进后的创建div函数
async function createDiv() {
  const container = document.querySelector('.container');
  const boxEle = document.createElement('div');

  // 设置div属性与样式
  boxEle.id = 'box_id' + dynamicid(); // 复用你已有的dynamicid生成函数
  boxEle.style.width = '40%';
  boxEle.style.height = '500px';
  boxEle.style.backgroundColor = 'yellow';
  boxEle.style.margin = '20px';
  boxEle.style.boxSizing = 'border-box'; // 修正样式属性拼写

  // 获取名称列表并填充到span
  const nameList = await fetchNameList();
  const spanEle = document.createElement('span');
  spanEle.className = 'list-names';
  // 用逗号分隔列表，或改为换行/其他格式
  spanEle.textContent = nameList.join(', ');
  
  boxEle.appendChild(spanEle);
  container.appendChild(boxEle);
}

解决方案2：jQuery预加载数据复用 #

提前获取一次数据库列表，后续创建div时直接复用数据填充：

let nameList = [];

// 页面初始化时获取数据
$.get('your-data-api.php', function(data) {
  nameList = data; // 假设接口返回数组格式
}).fail(function(err) {
  console.error('数据加载失败:', err);
});

$(function() {
  let count = 0;
  $('#creatediv_id').click(function() {
    // 创建带样式的div
    const newDiv = $(`
      <div id="first${count}" style="width:40%;height:500px;background-color:yellow;margin:20px;box-sizing:border-box;">
      </div>
    `);
    // 创建span并填充数据
    const nameSpan = $('<span class="list-names"></span>').text(nameList.join(', '));
    // 若需换行显示每个名称，可改用html：.html(nameList.map(name => `<p>${name}</p>`).join(''))
    
    newDiv.append(nameSpan);
    $('#container_id').append(newDiv);
    count++;
  });
});

解决方案3：修复jQuery load方法问题 #

若坚持使用load加载PHP生成的span，需针对每个新div单独请求，并添加时间戳避免缓存：

$(function() {
  let count = 0;
  $('#creatediv_id').click(function() {
    const divId = `first${count}`;
    // 先创建空div
    $('#container_id').append(`<div id="${divId}" style="width:40%;height:500px;background-color:yellow;margin:20px;box-sizing:border-box;"></div>`);
    // 针对新div加载PHP内容，加时间戳避免缓存
    $(`#${divId}`).load(`your-span-template.php?_=${new Date().getTime()}`);
    count++;
  });
});

核心提示 #

你之前插入随机文本能正常显示，说明元素创建逻辑没问题，问题本质是数据库数据未正确绑定到新元素。优先选择预加载数据复用的方案，减少重复请求数据库的开销。

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