如何创建空jQuery元素并填充？循环外层元素插入失败求助

我帮你捋清楚问题出在哪，以及怎么实现你要的效果～

首先得明确：你用$()创建的是一个空的jQuery集合，它本质上没有绑定任何实际的DOM节点。所以你往里面append元素时，这些元素只是被“暂存”在这个空集合里，但这个集合本身没法直接挂载到DOM树上，自然看不到效果。如果想让所有插入的元素都是同级、不带外层容器，那可以试试这两种思路：

方法1：用文档片段做临时容器 #

文档片段是个“隐形”的容器，它不会被插入到DOM中，只会把它的子元素添加到目标位置，完美满足你要同级元素的需求。代码示例：

// 创建文档片段的jQuery包装对象
const $tempContainer = $(document.createDocumentFragment());

// 循环创建元素并添加到片段中
for (let i = 0; i < 5; i++) {
  const $newItem = $('<span>').text(`同级元素 ${i+1}`);
  $tempContainer.append($newItem);
}

// 把片段里的所有元素一次性插入到页面目标位置
$('#your-target-element').append($tempContainer);

方法2：用jQuery集合的.add()方法收集元素 #

初始化一个空的jQuery集合，每次循环把新创建的元素添加到集合里，最后一次性插入到DOM中，这样所有元素都是同级：

// 初始化空的jQuery集合
let $siblings = $();

// 循环创建元素并加入集合
for (let i = 0; i < 5; i++) {
  const $newItem = $('<p>').text(`我是同级元素 ${i+1}`);
  $siblings = $siblings.add($newItem);
}

// 把所有元素插入到目标位置
$('#your-target-element').append($siblings);

为什么你之前的操作无效？ #

你之前用$()创建空容器后调用.append()，其实是尝试往空集合里的每个元素添加子节点，但集合里根本没有任何DOM元素，所以这些新创建的元素只是游离在内存中，没有被挂载到DOM树里，自然看不到效果。而上面两种方法要么用隐形的文档片段临时存元素，要么直接用集合收集元素，最后一次性插入，就能解决问题啦～

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