如何从HTMLCollection获取子元素outerHTML并用于模板拼接？

核心问题说明 #

你之前循环失败的原因是：HTMLCollection是类数组对象，不是标准数组，无法直接使用数组的forEach方法，必须先转换为数组，或者用传统的for循环遍历。

方法一：转换为数组后处理（推荐） #

利用Array.from()把类数组的HTMLCollection转成标准数组，再通过map提取每个option的outerHTML，最后拼接成完整的HTML字符串：

// 获取目标select下的所有option元素集合
const optionsCollection = $('#table-body:first-child').closest('select').children;
// 转换为数组并拼接所有option的HTML
const optionsHtml = Array.from(optionsCollection).map(opt => opt.outerHTML).join('');

// 插入到你的新增行模板中
const newRow = `<tr><td><select>${optionsHtml}</select></td></tr>`;
// 后续可将newRow添加到表格中，比如：
// $('#table-body').append(newRow);

方法二：传统for循环遍历 #

如果不想转换数组，直接用普通for循环遍历HTMLCollection的索引：

const optionsCollection = $('#table-body:first-child').closest('select').children;
let optionsHtml = '';
// 遍历集合拼接每个option的outerHTML
for (let i = 0; i < optionsCollection.length; i++) {
  optionsHtml += optionsCollection[i].outerHTML;
}

// 插入模板并使用
const newRow = `<tr><td><select>${optionsHtml}</select></td></tr>`;

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