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

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

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

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

常见错误写法：

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

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

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

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

实操要点：

• 目标容器必须是 （不能是 或
  ）

  模板行建议放在 <script type="text/template"></script> 或隐藏
  中，避免污染 DOM
  插入前可手动重置新行中的 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) + 手动清理

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

  关键细节：

  

  HTML Text Extract

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

  下载
  • 用 cloneNode(true) 克隆整行，保留所有实时状态（.value、.checked 等）
  • 新行中要重置的字段（如序号、唯一 name）必须显式赋值，不能依赖 HTML 属性
  • 避免克隆后立即 appendChild 到原
  ——若模板行本身就在 tbody 内，先 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 提取——前者忽略 实时值，后者混入标签。

  正确提取逻辑：

  • 遍历当前行所有

  和

  对每个单元格：优先取 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 键可能跳过刚加的行。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！