在 jQuery 中，<textarea> 元素的用户输入内容始终由其 value 属性（或 .val() 方法）维护，而其 innerHTML（即 html() 读取的内容）仅反映初始 HTML 中的文本节点，不会自动同步用户输入。因此，直接调用 $('#test').html() 总是返回 <textarea></textarea>，即使用户已输入 “Mango”。
要让 html() 返回带值的 <textarea>（如 <textarea>Mango</textarea>），核心思路是：在序列化前，显式将每个 <textarea> 的当前 val() 设置为其 html() 内容。由于 jQuery 的 .html( function ) 支持回调写入，可安全、批量地完成同步：
// ✅ 正确做法：同步 value 到 innerHTML，再获取 html()
function getHtmlWithTextareaValues() {
// 临时将所有 textarea 的 value 写入其 innerHTML
$('textarea').html(function() {
return $(this).val();
});
// 此时 html() 将包含用户输入
return $('#test').html();
}
// 使用示例
$('#saveBtn').on('click', function() {
const serialized = getHtmlWithTextareaValues();
console.log(serialized); // 输出: "<textarea>Mango</textarea>"
});⚠️ 重要注意事项：
- 此操作是临时覆盖 <textarea> 的 innerHTML，不影响后续交互（.val() 仍独立工作）；
- 若页面含多个 <textarea>，上述方法会统一处理，无需逐个选择；
- 避免在 DOM 渲染关键路径中频繁调用（如输入事件中），建议仅在导出/序列化时触发；
- 原生替代方案（不依赖 jQuery）：element.innerHTML = element.value，但需遍历 NodeList。
✅ 总结：html() 本身不感知表单控件状态，必须主动同步。通过 $('textarea').html(fn) 回调注入 .val()，即可生成符合预期的、含用户数据的 HTML 字符串，适用于模板导出、富文本快照等场景。
立即学习“前端免费学习笔记（深入）”；
