本教程详细阐述了如何利用html `` 标签和jquery动态生成表单输入控件，并填充其值。文章将重点介绍正确克隆模板内容、定位输入元素、设置其属性以及管理外部依赖的方法，旨在提供一套清晰、专业的解决方案，以应对在web应用中需要重复创建和管理表单字段的场景。
引言
在现代Web开发中，经常需要根据后端数据或其他用户操作动态地生成表单元素。HTML5的 <template> 标签提供了一种标准化的方式来定义可复用的标记结构，而JavaScript（特别是结合jQuery）则能高效地操作这些模板，创建并填充实际的DOM元素。本文将指导您如何结合这两者，实现动态生成带有预设值的输入控件。
核心概念与实现步骤
动态生成输入控件的核心在于正确地获取模板内容、克隆它，然后定位到克隆后的输入元素并设置其值。
1. HTML模板结构
首先，我们需要定义一个HTML <template> 标签，它将包含我们希望重复使用的输入控件结构。为了与现代前端框架和样式库（如Bootstrap）更好地集成，建议采用语义化的HTML结构。
<template id="gridrow-template-input-group">
<div class="row">
<div class="input-group mb-3">
<input type="text" name="name[]" class="form-control"
placeholder="Row x" data-value="0" >
<div class="input-group-text" style="cursor:pointer;" onclick="RemoveRow(this)">
<i class="fa fa-remove" style="color:#CDCDCD"></i>
</div>
</div>
</div>
</template>
<div id="gridrow-field-container" class="container"></div>注意事项：
立即学习“前端免费学习笔记（深入）”；
- 模板内的 id 属性应避免使用固定值，因为动态生成多个元素时会导致ID重复，影响DOM操作和唯一性。这里我们移除了原始模板中的 id='newrowItem_1' 和 id='fieldrowItem_1'。
- 为了美观和功能性，我们使用了Bootstrap的 input-group 类和 input-group-text 来包裹输入框和移除按钮。
- onclick="RemoveRow(this)" 直接绑定了事件，对于动态生成的元素，这是一种简单但可能不是最佳实践的方式。更推荐使用事件委托来处理动态元素的事件。
2. 引入必要的依赖
为了使样式和图标正常显示，我们需要引入Bootstrap和Font Awesome。同时，jQuery是本文操作DOM的基础。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
请确保这些依赖在您的HTML文档的 <head> 或 <body> 标签的适当位置引入。
3. JavaScript逻辑：克隆与填充
核心的JavaScript逻辑负责获取模板、克隆其内容、找到内部的输入框并设置其值，最后将其添加到页面中。
// 示例数据，模拟从后端获取的值
const item = {
MeetingPollingPartsValues: [
{ QuestionValue: '选项一' },
{ QuestionValue: '选项二' },
{ QuestionValue: '选项三' }
]
};
// 获取容器和模板
const $container = $('#gridrow-field-container');
const $template = $('#gridrow-template-input-group');
// 定义移除行函数
const RemoveRow = (span) => {
$(span).closest('.row').remove();
};
// 遍历数据并动态生成输入框
$(item.MeetingPollingPartsValues).each((index, partValue) => {
// 关键步骤：正确克隆模板内容
// 使用 .contents().clone() 可以确保克隆的是模板内部的所有子节点，
// 并且这些节点被jQuery正确包装，以便后续的 .find() 操作。
const $inputGroup = $template.contents().clone();
// 在克隆的元素中查找输入控件
const $inputControl = $inputGroup.find('input');
// 设置输入控件的值
$inputControl.val(partValue.QuestionValue);
// 设置其他属性，如placeholder和data-value
$inputControl.attr('placeholder', `行 ${index + 1}`);
$inputControl.attr('data-value', partValue.QuestionValue); // 可根据需求设置
// 将生成并填充好的输入组添加到容器中
$container.append($inputGroup);
});关键点解析：
- $template.contents().clone(): 这是正确克隆模板内容的关键。template.content 返回一个 DocumentFragment，直接对其调用 $(template.content.cloneNode(true)) 可能不会得到一个jQuery对象，其 find() 方法可能无法按预期工作。而 $template.contents() 会获取 <template> 标签内部的所有子节点（包括文本节点），并将其包装成jQuery对象集合。对其调用 .clone() 则会深度克隆这些节点，确保所有子元素都被复制。
- $inputGroup.find('input'): 在克隆后的 $inputGroup 内部查找 <input> 元素。由于 $inputGroup 现在是一个有效的jQuery对象，此查找操作将准确无误。
- $inputControl.val(value): 设置输入框的 value 属性。
- $inputControl.attr('attributeName', 'value'): 用于设置其他HTML属性，如 placeholder 和 data-value。
总结
通过上述步骤，我们成功地利用HTML <template> 标签和jQuery实现了动态生成并填充表单输入控件的功能。这种方法具有以下优点：
- 结构清晰： HTML和JavaScript职责分离，模板定义了结构，JavaScript处理逻辑。
- 可维护性高： 模板易于理解和修改，JavaScript代码专注于数据处理和DOM操作。
- 性能优化： <template> 标签的内容在页面加载时不会被渲染，只在需要时才克隆并添加到DOM中，减少了初始渲染负担。
在实际项目中，可以进一步优化事件处理（使用事件委托而非 onclick 属性）以及错误处理，以构建更健壮和用户友好的动态表单。
