JS如何实现函数按参数指定次数返回对应数量的HTML元素？

原生JS优先实现，可兼容原有调用逻辑 #

你原有代码仅返回了单个span字符串，未根据传入的重复次数参数批量生成元素，修改方案如下：

• 方案1：返回拼接后的HTML字符串，适配你现有jQuery的append调用逻辑

function addSpan(times){
  // 生成指定长度的数组，每个元素对应一个span字符串，最后拼接为完整字符串返回
  return Array.from({ length: times }, () => `<span>This is a span</span>`).join('');
}

// 原有调用无需修改，传入2即可返回2个span的拼接字符串
$("body").append( addSpan(2) )

• 方案2：完全无依赖纯原生实现，直接操作DOM插入，无需引入jQuery

function addSpan(times, targetNode = document.body) {
  // 使用文档碎片减少DOM重绘，性能更优
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < times; i++) {
    const span = document.createElement('span');
    span.textContent = 'This is a span';
    fragment.appendChild(span);
  }
  targetNode.appendChild(fragment);
}

// 调用示例，直接向body插入2个span
addSpan(2);

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