如何用jQuery动态创建子元素数量可变的嵌套元素？用循环还是更高效方法？

你当前使用的单个嵌套动态元素创建代码如下：

$('#id').append($('<div/>').addClass('level2').append($('<div/>').addClass('level3')))

针对批量创建这类元素的需求，这里提供几种简便的实现方案，适配你基于对象数组和用户输入的实际业务场景：

方案1：循环构建后一次性追加（减少DOM操作） #

先创建空的jQuery容器，循环生成单个嵌套元素并加入容器，最后一次性追加到目标节点，避免频繁操作DOM影响性能：

// 示例创建数量，实际可替换为数组长度或用户输入值
const createCount = 5;
const $elementContainer = $();

for (let i = 0; i < createCount; i++) {
  const $singleItem = $('<div/>').addClass('level2').append($('<div/>').addClass('level3'));
  $elementContainer.add($singleItem);
}

$('#id').append($elementContainer);

方案2：遍历对象数组生成对应元素 #

如果数据来自对象数组，直接用jQuery的$.each遍历，为每个数据项生成带业务内容的元素：

// 示例业务数据数组，实际替换为你的数据
const dataArray = [
  { id: 1, desc: '项目1' },
  { id: 2, desc: '项目2' },
  { id: 3, desc: '项目3' }
];

$.each(dataArray, function(_, item) {
  const $item = $('<div/>').addClass('level2')
    .append($('<div/>').addClass('level3').text(item.desc));
  $('#id').append($item);
});

方案3：模板字符串拼接后插入 #

若元素结构复杂，用模板字符串拼接HTML代码，再一次性插入，可读性更强：

const createCount = 5;
let htmlTemplate = '';

for (let i = 0; i < createCount; i++) {
  htmlTemplate += '<div class="level2"><div class="level3"></div></div>';
}

// 覆盖目标节点内容用html()，追加用append()
$('#id').append(htmlTemplate);

这些方法无需切换纯JS复杂操作，贴合jQuery使用习惯，能高效实现批量创建需求。

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