jQuery 中 html() 方法保存 textarea 当前值的正确实践

jquery 的 `html()` 方法默认不包含 `` 的用户输入值，需在调用前手动将 `val()` 同步到元素的 innerhtml，才能使 `html()` 输出含实际内容的完整 html 字符串。

在 jQuery 中， 元素的用户输入内容始终由其 value 属性（或 .val() 方法）维护，而其 innerHTML（即 html() 读取的内容）仅反映初始 HTML 中的文本节点，<strong>不会自动同步用户输入</strong>。因此，直接调用 $('#test').html() 总是返回 <textarea>，即使用户已输入 “Mango”。

要让 html() 返回带值的 （如 <textarea>Mango），核心思路是：在序列化前，显式将每个 的当前 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); // 输出: "Mango"
});

⚠️ 重要注意事项：

• 此操作是临时覆盖 的 innerHTML，不影响后续交互（.val() 仍独立工作）；
• 若页面含多个 ，上述方法会统一处理，无需逐个选择；
• 避免在 DOM 渲染关键路径中频繁调用（如输入事件中），建议仅在导出/序列化时触发；
• 原生替代方案（不依赖 jQuery）：element.innerHTML = element.value，但需遍历 NodeList。

✅ 总结：html() 本身不感知表单控件状态，必须主动同步。通过 $('textarea').html(fn) 回调注入 .val()，即可生成符合预期的、含用户数据的 HTML 字符串，适用于模板导出、富文本快照等场景。