用 insertAdjacentHTML() 或 cloneNode(true) 可安全复制含 textarea 的表格行，避免 innerHTML 重写导致内容丢失；提取行内容到剪贴板需优先读取 .value 而非 innerHTML/innerText。

直接用 innerHTML 复制含 <textarea></textarea> 的表格行，100% 会清空用户已输入的内容——这不是 bug，是浏览器对表格元素 DOM 状态管理的底层限制。

为什么 innerHTML += '...' 会让 textarea 值消失

浏览器在解析 innerHTML 赋值时，会销毁原 <tr> 及其所有子节点（包括已填内容的 <code><textarea></textarea>），再重建整个结构。此时 <textarea></textarea> 的 value 属性虽在 HTML 中有 value="xxx"，但 DOM 实际状态不会回填——它只认实时 .value，而这个值早已被丢弃。

常见错误写法：

tbody.innerHTML += '<tr><td><textarea></textarea></td></tr>'; // ❌

• innerHTML 对 <tbody> 是“全量重写”，不是“追加” <li>即使你从模板中读取 <code>template.innerHTML，一旦拼进 innerHTML +=，照样触发重渲染
• 移动端 Safari 和 Chrome 90+ 会更激进地回收表单控件实例

安全复制带 textarea 的行：用 insertAdjacentHTML()

它把字符串解析为节点后插入指定位置，不干扰已有 DOM，<textarea></textarea> 的 .value 保持不变。


HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载

立即学习“前端免费学习笔记（深入）”；

实操要点：

• 目标容器必须是 <tbody>（不能是 <code><table> 或 <code><div>） <li>模板行建议放在 <code><script type="text/template"></script> 或隐藏 <tr id="row-template"> 中，避免污染 DOM <li>插入前可手动重置新行中的 <code>id、name、value（如需清空）

示例：

const template = document.getElementById('row-template');
const tbody = document.querySelector('#myTable tbody');

function addRow() {
  const html = template.innerHTML.replace(/id="[^"]*"/g, ''); // 清除 id 防重复
  tbody.insertAdjacentHTML('beforeend', `<tr>${html}</tr>`); // ✅ 安全插入
}

更健壮方案：cloneNode(true) + 手动清理

当模板含事件监听器、自定义属性或需要深度控制时，克隆比字符串解析更可靠。

关键细节：

• 用 cloneNode(true) 克隆整行，保留所有实时状态（<textarea>.value</textarea>、<input>.checked 等）
• 新行中要重置的字段（如序号、唯一 name）必须显式赋值，不能依赖 HTML 属性
• 避免克隆后立即 appendChild 到原 <tbody>——若模板行本身就在 tbody 内，先 <code>remove() 再克隆

  示例：

  const templateRow = document.getElementById('row-template');
  function addRow() {
    const newRow = templateRow.cloneNode(true);
    // 重置唯一标识
    newRow.querySelectorAll('[name]').forEach(el => {
      el.name = el.name.replace(/\[\d+\]/, `[${Date.now()}]`);
    });
    // 清空 textarea 初始值（可选）
    newRow.querySelectorAll('textarea').forEach(ta => ta.value = '');
    tbody.appendChild(newRow);
  }

  复制整行文本（含 textarea 内容）到剪贴板

  别用 innerText 或 innerHTML 提取——前者忽略 <textarea></textarea> 实时值，后者混入标签。

  正确提取逻辑：

  • 遍历当前行所有 <td> 和 <code><th> <li>对每个单元格：优先取 <code>querySelector('textarea, input, select') 的 .value；无则取 .textContent
  • 用 \t 拼接单元格，\n 拼接行，生成 TSV 字符串
  • 必须用 navigator.clipboard.writeText()，且只能在 click/pointerdown 回调中调用

  示例（点击行内按钮触发）：

  document.addEventListener('click', e => {
    const btn = e.target.closest('[data-copy-row]');
    if (!btn) return;
    const row = btn.closest('tr');
    const cells = Array.from(row.cells);
    const values = cells.map(cell => {
      const input = cell.querySelector('textarea, input, select');
      return input ? input.value : cell.textContent.trim();
    });
    navigator.clipboard.writeText(values.join('\t')).catch(() => {});
  });

  最易被忽略的一点：克隆或插入后，若新行含 contenteditable 或自动聚焦逻辑，记得检查 tabindex 和焦点管理——否则用户按 Tab 键可能跳过刚加的行。